新建项目时,确定你的环境已经是正确的了。
截至到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/
在上述过程完成后。项目是可以执行的了。
初始项目文件目录如下:
目录和文件说明:
-
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
** ios相关操作及运行截图如下:**
** android相关操作及运行截图如下:**
如果我们想在界面上显示Hello world
,可以简单改下,分别修改index.ios.js
和index.android.js
的render
函数返回的内容。
比如说index.android.js
原内容是:
刷新手机界面,修改后的界面如下:
调试方法
iOS调试方法
- 1, ⌘-R (刷新应用)
- 2, 安装frappe,可以进行Reload JS操作。(目前针对mac系统可以)
- 3,日志在xcode里可以看到输出的日志
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
进行监听
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中有
Reload JS
, Debug in Chrome
, Enable Live Reload
, Inspect Element
, Enable Perf Monitor
, Dev Settings
。
如果需要设置代理地址的话,点击Dev Settings
。
点击Debug server host & port for device
,如下为我的配置:
推荐:
RNTools是一个分享React Native文章、实例代码以及第三方模块的平台。RNTools官网链接 RNTools应用下载