(問渠那得清如許，為有源頭活水來。 雙手奉上RN官網(wǎng))

Integration With Existing Apps : 在原生項(xiàng)目中集成RN混合開發(fā)

  原生開發(fā)體驗(yàn)及性能優(yōu)良但開發(fā)周期太長(zhǎng),已經(jīng)版本更新周期長(zhǎng).
  RN開發(fā)速度快,底層封裝原生接口,開發(fā)快,但某些情況下仍不如原生合適
  兩者結(jié)合進(jìn)行混合開發(fā),結(jié)合優(yōu)點(diǎn),互補(bǔ)不足,大有可為.

??Objective-C+RN

• 要點(diǎn)說明
  • 1.明確你要集成 的RN組件
  • 2.為你需要的RN組件使用subspecs創(chuàng)建一個(gè)Podfile文件(依賴于cocoapods)
  • 3.使用JS創(chuàng)建你需要的RN組件
  • 4.創(chuàng)建RCTRootView,并添加一個(gè)在事件處理,而RCTRootView指向了你在index.ios.js中注冊(cè)的組件且其注冊(cè)名是你在index.ios.js中定義的.(WTF?)
  • 5.開啟RN服務(wù)器并運(yùn)行原生app.
  • 6.不斷增加或修改組件
  • 7.調(diào)試
  • 8.準(zhǔn)備部署(通過 react-native-xcode.sh腳本)
  • 9.部署上架應(yīng)用

• 具體實(shí)現(xiàn)

------ 1_先決條件 --------
1. RN開發(fā)環(huán)境配置
2. 安裝Cocoapods (sudo gem install cocoapods),用它來方便的添加RN框架到項(xiàng)目.

------ 2_包依賴 --------
1. 需要react & react native 的node.js模塊(通過npm管理的)
2. 在原生項(xiàng)目根目錄(與*..xcodeproj同級(jí)目錄)下添加package.json文件,該文件中配置了相關(guān)項(xiàng)目及模塊信息,
(npm通過該文件來添加需要的包依賴).  
例如下面信息是一個(gè)最精簡(jiǎn)的文件內(nèi)容. 版本號(hào)依據(jù)你的需求而定.測(cè)試發(fā)現(xiàn)版本號(hào)要符合x.y.z規(guī)則

{
  "name": "NumberTileGame",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.0.2",
    "react-native": "0.26.1"
  }
}

3. 在終端中進(jìn)入`package.json文件所在目錄`,運(yùn)行命令` npm install ` 安裝依賴的文件.
   該命令會(huì)在根目錄下創(chuàng)建`node_modules目錄`來存放所依賴的包.

------ 3_ Podfile --------
1. 在項(xiàng)目根目錄創(chuàng)建Podfile文件(通過npm我們把RN放在了node_modules,這里借助cocoapods把需要的組件引入進(jìn)來),
可以通過`pod init`來創(chuàng)建一個(gè)模板文件
2. 在Podfile文件中寫明需要添加的組件,例如

# target后緊跟項(xiàng)目名
target 'NumberTileGame' do

  # :path對(duì)應(yīng)的路徑為RN所在路徑. :subspecs中列出所需的RN控件
  pod 'React', :path => './node_modules/react-native', :subspecs => [
    'Core',  #必須的一些核心控件,例如AppRegistry, StyleSheet, View等
    'RCTText',  #<Text>元素
    'RCTWebSocket', # 用于 debugging
  ]

end

3. 在終端中進(jìn)入項(xiàng)目根目錄,運(yùn)行 命令`pod install `安裝所需組件依賴.
pod install 默認(rèn)會(huì)更新本地庫(kù)索引,比較耗費(fèi)時(shí)間.大多數(shù)情況下并不需要更新,使用`pod install --no-repo-update`替代
安裝完成后會(huì)生成xxx.xcworkspace,通過這個(gè)來打開項(xiàng)目

------ 4_ 代碼中集成 --------
1. 在項(xiàng)目根目錄創(chuàng)建文件index.ios.js,并在其中實(shí)現(xiàn)你的組件
2. AppRegistry.registerComponent('RNPage', () => RNHighScores);  
   這里的RNPage會(huì)在后邊用到

------ 5_ RCTRootView --------
1. 例如這里在界面上添加了一個(gè)按鈕,并關(guān)聯(lián)了點(diǎn)擊事件

#import "ViewController.h"
//引入RCTRootView
#import "RCTRootView.h"

@implementation ViewController

//與界面上按鈕的點(diǎn)擊事件關(guān)聯(lián)
- (IBAction)showRNPage:(UIButton *)sender {
    
    NSLog(@"High Score Button Pressed");
    //TODO:這里在產(chǎn)品階段似乎還需要一些操作,具體用到之后補(bǔ)充
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
    RCTRootView *rootView = [[RCTRootView alloc]
        initWithBundleURL:jsCodeLocation
        //這里的moduleName要與在index.ios.js中注冊(cè)的一致
        moduleName:@"RNPage"
        //傳入的參數(shù)
        initialProperties :@{
                             @"scores" : @[
                                            @{
                                               @"name" : @"Alex",
                                               @"value": @"42"
                                            },
                                            @{
                                               @"name" : @"Joel",
                                               @"value": @"10"
                                            }
                                          ]
                             }
        launchOptions    : nil];
    
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];

}

@end

------ 6_ 運(yùn)行測(cè)試 --------
1. 在info.plist中設(shè)置允許http訪問(添加設(shè)置App Transport Security Settings下的Allow Arbitrary Loads為YES)
2. 終端中進(jìn)入項(xiàng)目根目錄執(zhí)行: npm start . 啟動(dòng)本地服務(wù)器
3. 運(yùn)行app,直接使用xcode運(yùn)行或者使用RN運(yùn)行
(??運(yùn)行報(bào)錯(cuò),尚未解決,日了狗了的)



------ 7_ 產(chǎn)品部署 --------
//文檔里沒有說,但notes里有提到,用到后再回來補(bǔ)充

??Swift+RN

??Android+RN