前言
ReactNative是facebook在React基础上推出的跨终端开发解决方案，可以做到一套代码适配iOS、Android两大终端设备。
对于ReactNative的框架特点及原理就不做过多介绍，文后有相关链接，本系列文章记录我在现有Native App中集成ReactNative所遇到的坑和暂时的解决方案，希望大家多多交流，少踩坑。
环境配置
环境真的是令人头大的事，多少英雄好汉都止步于环境的安装。。这里有点夸张，其实按照官方的教程，环境配置其实是ReactNative最简单部分。我这里有一个原则：用最新的。ReactNative的更新速度非常快，及时更新自己的package.json文件中dependencies里React和ReactNative的版本，需要注意的是ReactNative的版本对React依赖严格，需配合升级，我目前用的是官方最新的版本：
"name": "react-native-module",
"version": "0.0.1",
"description": "",
"main": "index.ios.js",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"lint": "eslint -c .eslintrc . --ignore-path .gitignore",
"test": "echo \"Error: no test specified\" && exit 1",
"bundle-ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --platform ios --bundle-output ./bundle/index.ios.bundle --assets-dest ./bundle"
},
"author": "xxx",
"license": "ISC",
"dependencies": {
"object-assign": "4.1.1",
"react": "15.4.2",
"react-native": "0.42.3",
"react-navigation": "^1.0.0-beta.7",
"react-timer-mixin": "0.13.3"
},
"devDependencies": {
"babel-eslint": "7.2.1",
"eslint": "3.19.0"
}
如上所示是package.json的配置信息。会有人问怎么看最新的版本信息呢，其实一行命令：
npm info react-native
该命令会列举出所有的react-native版本。至于node和npm的版本，最好也更新下，不然真的会遇到各种各样问题，npm是跟node捆绑安装的，更新node，可以通过nvm来统一管理node的所有安装版本。(对于没有接触过Node的iOS开发来说，对于node和npm的理解我认为就是OC和Cocopods的关系，nvm就是gem，一样一样的_)
package.json配置文件写好后，就可以安装node_modules了，命令是：
npm install
对于上面package.json配置文件，还想提到的点就是scripts字段下的start、lint、test、bundle-ios这些都是表示一系列操作的名称，如果bundle-ios我们只需要在终端输入：
npm run bundle-ios
就会自动自行后面的node node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --platform ios -dev false --bundle-output ./bundle/index.ios.bundle --assets-dest ./bundle 可以对当前的RN文件进行打包。
以上大概就是开发ReactNative之前的环境配置，对于模拟器调试，需要代码和设置同时配下。
代码方面：
#ifdef DEBUG
NSURL * jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
NSURL * jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"bundle"];
#endif
DEBUG时候，在工程目录下运行命令，起个node服务：
npm start
然后就可以在模拟器上访问RN页面了。
对于真机调试，需要改下代码，把localhost改成自己电脑的IP地址，例如是172.17.9.1：
#ifdef DEBUG
NSURL * jsCodeLocation = [NSURL URLWithString:@"http://172.17.9.1:8081/index.ios.bundle?platform=ios&dev=true"];
#else
NSURL * jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"bundle"];
#endif
然后保证真机和电脑在同一网络环境下，将手机的HTTP代理改成电脑的IP，如图：
然后就可以在真机上调试RN代码了。
