集成 React Native 到现有 iOS 应用踩坑记录

前言

捣鼓了一天，看到 “Welcome to React Native” 页面出来的一刹那，终于长舒了一口气。过程中查文档，google， StackOverflow，各种方式都试过了，发现靠谱的 RN 资料是在不多，决定记录下遇到过的问题，希望能给同样困惑的你一个参考。

问题1：执行 npm install 报错 require [email protected], but none was installed

react native 对 react 的版本有严格要求，高于或低于某个范围都不可以，先尝试执行 npm install，再根据提示，执行npm install --save [email protected] 安装对应版本的 React。

问题2：执行 npm start 报 missing script: start 的错

package.json 文件中缺少"start"字段导致。
安装 React 和 React-Native 模块时需要配置一个如下 package.json 文件:

{
  "name": "Hello",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.47.1"
  }
}

scripts 中是用于启动 packager 服务的命令，如果没有start 字段，执行 npm start 时就会出错。

问题3：could not connect to development server

没有启动 packager 服务，进入项目根目录，执行npm start，打开 Xcode，重新运行项目。

问题4：application XXX has not been registered。

这个问题是由于AppRegistry.registerComponent方法中前两个两个参数位置搞混导致的。AppRegistry 是 JS 运行所有 RN 应用的入口。组件通过AppRegistry.registerComponent方法注册自己，然后原生系统才可以加载该组件。

static registerComponent(appKey, component, section?)

appKey 是整体 JS 模块的名称，在 iOS 原生代码中添加 RN 视图时会用到这个名称；component 是 JS 文件中组件的名称。

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                         moduleName        : <#appKey#>
                         initialProperties : nil
                         launchOptions     : nil];