React Native整合到原生專案

iOS端

一、準備工作

• Mac
• 安裝了node.js
• 安裝React Native （檢視ReactNative官網）
• 安裝CocoaPods

二、整合React Native

1.新建package.json（我以RNInsetIOSDemo作為演示）

1）在專案的跟目錄下面建立一個package.json的檔案，用於初始化react-native,在專案跟目錄下面執行如下命令

$ touch package.json

2) 開啟package.json 把一下程式碼新增進去，把”name”改成你自己專案的名字，儲存,我當前的”react”版本為”15.2.1” “react-native”的版本號為”0.29.2”

{
  "name": "RNInsetIOSDemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.2.1",
    "react-native": "0.29.2"
  }
}

2.在專案跟目錄下面安裝node_modules資料夾

專案跟目錄下面執行：

$ npm install

這一步可能需要的時間較長

3.Cocoapods整合React Native

若原專案無使用Cocoapods，則在根目錄下建立Podfile,新增如下程式碼。如果有則直接在Podfile裡面新增如下程式碼

target 'RNInsetIOSDemo' do
  # Uncomment this line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!
    # 取決於你的工程如何組織，你的node_modules資料夾可能會在別的地方。
    # 請將:path後面的內容修改為正確的路徑（一定要確保正確～～）。
 pod 'React', :path => './node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork’,
    'RCTWebSocket', # needed for debugging
    # Add any other subspecs you want to use in your project
    # 在這裡新增你工程需要用到的元件就可以，我只寫這幾種
  ]

  #這裡是你自己以前的一些三方庫，比如AFNetworking


end
 

儲存，執行：

$ pod install

4.新增index.ios.js檔案

跟目錄下建立index.ios.js

$ touch index.ios.js

建立成功之後會在跟目錄下會有index.ios.js檔案，開啟檔案在裡面新增如下程式碼，儲存

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class RNInsetIOSDemo extends Component {
  render() {
    return (
      
        
          Welcome to React Native!
        
        
          什麼鬼東西啊我曹,edit index.ios.js
        
        
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('RNInsetIOSDemo', () => RNInsetIOSDemo);

5.在原生專案新增RN程式碼

向你需要嵌入的ViewController重新增RCTRootView，下面的ReactViewController是我建立的專門放React Native模組的ViewController

 #import "V2ViewController.h"
 #import "RCTBundleURLProvider.h"
 #import "RCTRootView.h"

@interface V2ViewController ()

@end

@implementation V2ViewController

-(void)viewDidLoad {
    [super viewDidLoad];
    NSURL *jsCodeLocation;

  self.navigationItem.title = @"這個是RN頁面";  
    NSURL *jsCodeLocation;
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"RNInsetIOSDemo"
                                                 initialProperties:nil
                                                     launchOptions:nil];
    //注意，這裡是 @"RNInsetIOSDemo"
    rootView.frame = CGRectMake(0, 0, 375, 667);
    rootView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:rootView];    


}

@end

6. 啟動開發伺服器

在專案的跟目錄下執行

$ npm start

7.開啟RNInsetIOSDemo.xcworkspace執行專案

執行結果如下

三，總結

經過好幾天的研究終於成功了，心好累，RN好多坑。目前我對於RN還是有很多不懂，關於RN的學習我還會一直繼續。

注意，整合RN請暫時不要使用最新版本，不然會蹦。下一篇我會講整合最新RN，和如何使用微軟的Codepush實現熱更新，敬請期待。哈哈。