(???)013_ReactNative:Integration

(问渠那得清如许，为有源头活水来。 双手奉上RN官网)

Integration With Existing Apps : 在原生项目中集成RN混合开发

  原生开发体验及性能优良但开发周期太长,已经版本更新周期长.
  RN开发速度快,底层封装原生接口,开发快,但某些情况下仍不如原生合适
  两者结合进行混合开发,结合优点,互补不足,大有可为.

🔥Objective-C+RN

• 要点说明
  • 1.明确你要集成 的RN组件
  • 2.为你需要的RN组件使用subspecs创建一个Podfile文件(依赖于cocoapods)
  • 3.使用JS创建你需要的RN组件
  • 4.创建RCTRootView,并添加一个在事件处理,而RCTRootView指向了你在index.ios.js中注册的组件且其注册名是你在index.ios.js中定义的.(WTF?)
  • 5.开启RN服务器并运行原生app.
  • 6.不断增加或修改组件
  • 7.调试
  • 8.准备部署(通过 react-native-xcode.sh脚本)
  • 9.部署上架应用

• 具体实现

------ 1_先决条件 --------
1. RN开发环境配置
2. 安装Cocoapods (sudo gem install cocoapods),用它来方便的添加RN框架到项目.

------ 2_包依赖 --------
1. 需要react & react native 的node.js模块(通过npm管理的)
2. 在原生项目根目录(与*..xcodeproj同级目录)下添加package.json文件,该文件中配置了相关项目及模块信息,
(npm通过该文件来添加需要的包依赖).  
例如下面信息是一个最精简的文件内容. 版本号依据你的需求而定.测试发现版本号要符合x.y.z规则

{
  "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. 在终端中进入`package.json文件所在目录`,运行命令` npm install ` 安装依赖的文件.
   该命令会在根目录下创建`node_modules目录`来存放所依赖的包.

------ 3_ Podfile --------
1. 在项目根目录创建Podfile文件(通过npm我们把RN放在了node_modules,这里借助cocoapods把需要的组件引入进来),
可以通过`pod init`来创建一个模板文件
2. 在Podfile文件中写明需要添加的组件,例如

# target后紧跟项目名
target 'NumberTileGame' do

  # :path对应的路径为RN所在路径. :subspecs中列出所需的RN控件
  pod 'React', :path => './node_modules/react-native', :subspecs => [
    'Core',  #必须的一些核心控件,例如AppRegistry, StyleSheet, View等
    'RCTText',  #<Text>元素
    'RCTWebSocket', # 用于 debugging
  ]

end

3. 在终端中进入项目根目录,运行 命令`pod install `安装所需组件依赖.
pod install 默认会更新本地库索引,比较耗费时间.大多数情况下并不需要更新,使用`pod install --no-repo-update`替代
安装完成后会生成xxx.xcworkspace,通过这个来打开项目

------ 4_ 代码中集成 --------
1. 在项目根目录创建文件index.ios.js,并在其中实现你的组件
2. AppRegistry.registerComponent('RNPage', () => RNHighScores);  
   这里的RNPage会在后边用到

------ 5_ RCTRootView --------
1. 例如这里在界面上添加了一个按钮,并关联了点击事件

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

@implementation ViewController

//与界面上按钮的点击事件关联
- (IBAction)showRNPage:(UIButton *)sender {
    
    NSLog(@"High Score Button Pressed");
    //TODO:这里在产品阶段似乎还需要一些操作,具体用到之后补充
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
    RCTRootView *rootView = [[RCTRootView alloc]
        initWithBundleURL:jsCodeLocation
        //这里的moduleName要与在index.ios.js中注册的一致
        moduleName:@"RNPage"
        //传入的参数
        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_ 运行测试 --------
1. 在info.plist中设置允许http访问(添加设置App Transport Security Settings下的Allow Arbitrary Loads为YES)
2. 终端中进入项目根目录执行: npm start . 启动本地服务器
3. 运行app,直接使用xcode运行或者使用RN运行
(😡运行报错,尚未解决,日了狗了的)



------ 7_ 产品部署 --------
//文档里没有说,但notes里有提到,用到后再回来补充

🔥Swift+RN

🔥Android+RN