RN 初探

一、环境配置
不多说，直接参考RN中文网：http://reactnative.cn/docs/0.47/getting-started.html#content
二、关于IDE
1.笔者刚开始使用的Atom+Nuclide组建，弄了两天，只能用两个字失望来表达我此时的心情。原因如下：如果想让Atom里检测到JS的语法，要人工对flow版本进行控制。其次是提示弱+定义跳转困难。配了半天，各种不能用。
2.推荐开发工具：WebStorm。配置简单，提示功能强大，语法跳转准确。参考资料为：http://blog.csdn.net/shan1991fei/article/details/53507895
但是两个IDE目前都不能直接Debug，需要借助Chrome浏览器进行调试，不知道这个怎么破...
三、index.ios 中JS模块如何在Native中使用
通常index.ios.js中都有如下定义：
AppRegistry.registerComponent('BlinkAppxxx', () => BlinkApp);
其中，通过AppRegistry注册的js模块能让Native感知到，通过如下方式：

  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"BlinkAppxxx"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

其中，BlinkAppxxx是个字符串，是可以任意变换的，如JS端换成
AppRegistry.registerComponent('xxx', () => BlinkApp)，在Native端做如下改动即可：

 RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"xxx"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

四、关于npm start 的理解
npm start 是通过运行node_modules/react-native/local-cli/cli.js start 来启动一个本地服务器，因为默认使用8081端口，因此，如不做特殊处理，本地只能有一个node 服务器运行。只有当node服务器建好，我们才可以通过模拟器调试。大致的流程是：
node(localhost:8081)服务(通过执行 npm start启动)->将index.ios.js里相关联的JS依赖打包
本地模拟器-> moduleName->node服务器打好的JSBundle中寻找moduleName
五、关于yarn或者npm
yarn 或者 npm 相当于Xcode项目中的cocoapods，是node的包管理工具。在实际运行的时候，如果少一些依赖，可以进入到项目目录中把依赖的第三方库添加进来，通常做法如下：
yarn add xxxxxx
npm install xxxxxx,
添加完依赖后，Command+R直接调试即可。
六、从github上下载的RN Demo如何运行？
demo中通常会有package.json，这个相当于cocoaspod中的podfile。执行的方式也类似：
进入Demo所在的目录，执行npm install，就会根据package.json的依赖生成好
node_modules，然后就可以运行Demo了。
七、为什么Demo运行的好好的，通过自己的App载入就会出错？
通常是因为Demo 和 App使用的RN版本库不一致导致的，解决这个问题的方式是通过
react-native init MyRNApp --version 0.44.3 （假如你的App使用的RN版本是0.44.3）创建一个指定版本的RN项目，然后把Demo中的代码移植到刚创建的MyRNApp中。然后使用新创建的项目进行调试，如果能通过，则App中也能通过。

当然，你也可以修改一下Demo的package.json，将dependencies 中的react-native中的版本修改成你App使用的RN版本，然后重新执行 npm install。
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-native-elements": "^0.11.1",
"react-native-vector-icons": "^4.0.1"
},

参考资料：
http://reactnative.cn/docs/0.47/getting-started.html#content
http://blog.csdn.net/shan1991fei/article/details/53507895

RN 初探

推荐阅读更多精彩内容