React Native新建项目

1051 查看

新建项目时，确定你的环境已经是正确的了。

截至到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 install

2), 修改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应用下载