新建项目时，确定你的环境已经是正确的了。
截至到2016/3/1日，RN版本是0.20.0，目前创建新项目时RN默认版本是0.20.0（3月2日已经升级到0.21.0版本了），由于版本升级较快，可能会出现一些问题，多数是相关的依赖出现问题，升级到最新的就行了。具体解决方法参考文章尾部。
创建
// 创建新项目，项目名称为Test
react-native init Test
// 注：创建时间会比较长，在下载相关的依赖。
// 建议切换npm的代源为国内的地址。具体请看http://www.waylau.com/faster-npm/
react-native init结束
在上述过程完成后。项目是可以执行的了。
初始项目文件目录如下：
初始项目目录
目录和文件说明：
-
android目录是Android项目的目录，里面有Android Studio项目环境文件。 -
ios目录是iOS项目目录，是XCode项目环境文件。 -
index.android.js是Android入口文件。 -
index.ios.js是iOS入口文件。 -
node_modules是项目的依赖包，基于node文件依赖系统产生的，该目录中有react-native相关的依赖和其他的第三方lib -
package.json是项目依赖包的说明文件，列举了依赖的包以及版本号等等信息。
执行
iOS执行方法：
- 通过命令执行 （在
0.20.0的版本是可以的，** 老版本不支持 **）
react-native run-ios
// 注：该过程会自动打开命令行执行react-native start（获取jsbundle包的服务器） - 或通过XCode执行
双击ios目录中的Test.Xcodeproj文件，在打开Xcode开发环境之后，点击Xcode的Run即可。
Android执行方法：
// 第一步，开启安卓模拟器，使模拟器成为可用状态，或者连接真机，注意真机需要设置成调试模式。
adb devices
// 上述会列出当前可以使用的设备，如果列表为空，则后续的无法运行。
// 第二步，开启一个命令行控制台，进入项目目录
react-native start
// 上述命令是开启jsbundle服务器，用于测试设备上Reload JS的服务器。
// 第三步, 再开启一个新的命令行控制台，进入项目目录
react-native run-android
react-native start执行后
** ios相关操作及运行截图如下：**
react-native run-ios部分截图
iOS运行效果图
** android相关操作及运行截图如下：**
react-native run-android部分截图
Genymotion的加载jsbundle文件过程
android运行效果
如果我们想在界面上显示Hello world，可以简单改下，分别修改index.ios.js和index.android.js的render函数返回的内容。
比如说index.android.js原内容是：
未修改的index.android.js的部分代码
修改后的index.android.js部分代码
刷新手机界面，修改后的界面如下：
Hello world
调试方法
iOS调试方法
- 1， ⌘-R (刷新应用)
- 2， 安装frappe，可以进行Reload JS操作。（目前针对mac系统可以）
- 3，日志在xcode里可以看到输出的日志
iOS中command + D弹出的窗口
Android调试方法
- 1，在命令终端中输入
adb shell input keyevent 82，会弹出Menu，然后点选Reload JS。 - 2，点击真机的Menu虚拟键，也会弹出Menu窗口。
- 3，安装frappe，可以进行
Reload JS操作。（进支持Mac系统） - 4，日志输出：在命令终端输入
adb logcat *:S ReactNative:V ReactNativeJS:V进行监听
Shake或者点击Menu键之后弹出的窗口
Windows中快捷启动项目、监听日志、Reload JS等操作
具体请参看github上项目rn_android_bat，项目描述了快捷RN服务器快捷启动方法、启动项目、监听RN输出日志、设备弹出RN操作框等操作。
新建项目运行出错解决方案
在项目运行时，可能会出错。以下是部分错误的解决办法。
** A, unable to download js bundle. xxxx **
该问题可能是多种原因导致的，解决方法如下：
- 1，** 确定设备已经联网**。如果未联网，前先联网。
- 2，先确定测试设备跟电脑是否在同一个局域网。如果没有，请确保先在一个局域网内。
- 3，确定
react-native start已经正确执行了。 该命令需要在项目的目录中执行才有效。 - 4，针对安卓设备，是否在
Dev Settings中的Debug server host & port for device中设置了地址。如果没有请先设置。IP地址即是电脑地址，端口号在你没改的情况下是8081。如果当前电脑IP地址是192.168.1.114。那么应该设置为192.168.1.114:8081。具体操作见文章底部。
** B, Can't find variable: __fbBatchedBridge ... **
该问题解决方法同A一样。
**C, Could not connect to development server. **
同A
** D，Unknown option: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc.stage **
该问题是依赖对于.babelrc的支持不统一。最新版本的RN已经移除了.babelrc的配置。解决方法如下：
-
1，移除
node_modules/react-deep-force-update/.babelrc文件。 然后重起react-native start。
此方法也可以作为一个fix方法。如果还没解决问题，请用方法2。 -
2，更新相关的依赖，具体如下：
1), 修改node_modules/react-transform-hmr/package.json里的dependencies配置中的react-proxy版本为1.1.2
rm -rf node_modules/react-proxy/
npm install2), 修改node_modules/react-proxy/package.json里的dependencies配置中的react-deep-force-update版本为2.0.1 rm -rf node_modules/react-deep-force-update/ npm install //上述命令rm是Linux中的移除操作。如果是win下。可以使用DEL和rd // win下: del xxfile //删除xxfile文件 // win下: rd xxdir //删除xxdir目录
** E, 在react-native start时提示Watcher took too long to load **
该问题是程序watch文件时时间超时导致的。可以修改最大的超时时间。
- 修改
node_modules\react-native\packager\react-packager\src\FileWatcher\index.js中的MAX_WAIT_TIME为50000或者更大。
设置安卓测试设备上的代理。
安卓中弹出的Menu
Menu中有
Reload JS, Debug in Chrome, Enable Live Reload, Inspect Element, Enable Perf Monitor, Dev Settings。
如果需要设置代理地址的话，点击Dev Settings。
点击Dev Settings后的界面
点击Debug server host & port for device，如下为我的配置：
设置界面
推荐：
RNTools是一个分享React Native文章、实例代码以及第三方模块的平台。RNTools官网链接 RNTools应用下载
网友评论