windows下react-native环境搭建(过程各种坑)

一. 安装列表(建议按照顺序进行)

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