一. 安装列表(建议按照顺序进行)
1. 基本环境
- jdk8: 记得配置环境变量
- nodejs: 7.x版本据中文网说在windows中有坑，建议使用6.x
- python2.x: 必须是2.x
2.Android SDK
这里推荐去react-native中文网查看相关内容,记得配置环境变量
注：Android SDK Build-Tools 版本必须为23.0.1
3. react-native-cli
首先将npm更新到最新版本 (可不是nodejs哟)
npm i npm
旧版本npm下安装react-native-cli可能会出现图中问题
npm版本问题.png
由于内容安装较慢，建议使用nrm切换cnpm下载
nrm use cnpm
切换后安装,推荐使用facebook官方推荐的yarn
cnpm install -g yarn react-native-cli
二. 运行(重要)
1. 创建app应用,如果未使用cnpm与yarn速度可能会有些慢
react-native init helloapp
注：如果npm版本低可能出现invariant模块找不到的问题
2. 测试
- 将手机用USB线连接电脑，开启USB调试(开启方法针对个人手机型号google)
- 使用react-native start构建项目
- 使用react-native run-android将app安装到手机中
三. 问题
1. run-android 中的问题
-
运行该命令后手机应用可能会显示 Could not get BatchedBridge, make sure your bundle is packaged correctly的背景
解决方案：首先在app/src/main下创建assets文件夹，然后执行
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
指令过长建议写入package.json的scripts中
Paste_Image.png
执行后会发现assets下多了两个文件，meta结尾可删除，手机端之所谓未正常显示原因就在index.android.bundle上
Paste_Image.png
- 当然了那么长的命令不会那么容易让你成功的。。。。
在执行上述命令可能会发生如下问题
.babel.json.png
解决方法：进入图中目录，找到.babel.json文件修改其权限
chmod 777 .babel.json
修改权限后该文件就可读了
2. react-native start
该命令表示构建项目，调试时虚拟机或真机会从项目中fetch js文件，当我们使用虚拟机(推荐genymotion)进行调试时，在我们修改代码后需要reload最新js
注：index.android.js中根组件(register)名一致，否则会报错
Paste_Image.png
网友评论