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
网友评论