简单记录Windows平台搭建react-native项目以及走过的坑

react-native环境搭建+启动

1、官网下载安装node，用于安装启动react-native相关模块
2、 安装Java SDK（稳定版，9.0以下）。
网址http://www.oracle.com/technetwork/java/javase/downloads/index.html
配置JAVA_HOME环境变量
坑一：JAVA_HONE的值不能直接包含\bin文件夹，否则会报类似如下错误：

image.png

方法：

JAVA_HOME.png

Path.png

3、安装Android开发工具：Android Studio
配置环境变量：ANDROID_HOME，找到自己的SDK的安装路径

ANDROID_HOME.png

Path.png

确保SDK Location地址对应自己安装的路径的正确：

image.png

在Android SDK里面下载与虚拟机对应的Android系统版本：

image.png

4、安装Android 模拟器：这里使用的Genymotion
同时也要安装Virtualbox，建议安装4.3.4稳定版，避免一些坑

image.png

如上地方的主机虚拟网络界面必须是这个IP地址；

启动Genymotion 点击add+，需要登录才可获取虚拟设备，

image.png

获取设备后，选择需要使用的设备，点next下载即可：注意下载的设备的系统版本，尽量在5/6/7

image.png

坑二：采用命令行运行React Native项目的时候，突然报出找不到ADB,
com.android.builder.testing.api.DeviceException: Could not create ADB Bridge. 的错误了，具体错误信息如下

image.png

原来Genymoation有默认去找ADB的路径，修改方法：setting里面选择如下选项，把Android Studio的SDK路径填进去：

image.png

5、npm 安装 react-native命令行工具：
npm install -g react-native-cli

6、创建自己的React Native 应用 ：
react-native init FirstAPP
创建好后会有如下提示信息：

image.png

7、运行项目：进入项目根目录 /FirstApp
react-native run-android 运行

image.png

先会启动js服务器

image.png

编译成功，运行虚拟机，OK

image.png

8、将项目运行在真机上：手机调成USB调试模式，选择MIDI输入设备
坑三：安卓机上因为assets文件夹下没有index.android.bundle，需要执行命令生成
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/
但生成的项目只有index.js文件，没有对应的Android，iOS文件，导致报错
解决，将上述命令的index.android.js换成index.js即可
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

image.png