App集成RN环境方案

开发环境的配置

1. 安装node.js & package.json(依赖及版本配置文件)

2. react 0.47.2

3. podfile

  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.47则加入此行
    'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的模块
    'RCTActionSheet',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTSettings',
  ]
  # 如果你的RN版本 >= 0.42.0，则加入下面这行
  pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

4. RCTRootView

RN在native页面的展现主要通过RCTRootView。示例代码（加载bundle包）：

NSURL *jsCodeLocation;
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"bundle"];
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                moduleName: @"app"
                         initialProperties:
     nil launchOptions: nil];

    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];

5. 打包

RN项目可以打成一个bundle包，供他人使用，但是不含资源文件

整体思路

项目思路

1. 安装node.js
2. 根据package.json npm start
3. 调整项目结构
4. pod install

设计思路

1. 热更新：

1. RN开发后资源用相对路径，打bundle后一起压缩zip，传至后台
2. 客户端请求接口，根据项目ID，第一次请求或者版本号不相符，下载zip，解压至Cache文件夹。根据ID创建路径
3. 进入RN页面前，如果不需要更新，直接找到bundle进入，如果需要更新，下载替换
4. 发生错误，删除相应路径下文件，重新下载。

2. 增量

3. 预加载

问题点

1. 安装低版本的react，package里配置

2. 提示为register，index入口名配置问题

3. 本地运行RN代码，需要启动npm，且http请求设置为允许

启动npm后可以动态调试

4. react本地运行版本与bundle版本要保持一致

高了或者低了都不行

5. RN调用原生 Native类名

· push 需要获取 Appdelegate导航控制器
· push or pop 要在main_queue中执行，否则可能会失效
· 回调用RCTPromiseResolveBlock/RCTPromiseRejectBlock（官方的另一种方式不知道为何失效，待核查）

6. Native向RN传参

如果用initialProperties，RN页面内如果采用navigation或者多级页面，一定要逐层将props传递，传递后直接取出this.props.xxx