React-Native-RN-的入坑之路

2018-10-12 阅读量

本文主要介绍react-native在Windows下android平台开发环境的搭建和遇坑总结

一、官方文档

官方文档有一个大体上的引导作用，很多时候还是需要自己去摸索好填平遇到的坑，然后从这个坑跳到另一个坑。
开发环境搭建-官方文档

二、准备工作

1.Node.js

Node.js，版本必须高于8.3，安装完node后建议更改镜像为淘宝镜像，操作如下：
1.1.找到你nodejs的安装路径

1.2.进入目录node_modules\npm找到npmc这个文件并在其最后一行添加如下内容：

1	registry = https://registry.npm.taobao.org

1.3.我这里建议使用git来输入命令行操作，这里贴出git下载地址

Node.js10.11.0下载地址

2.Python

Python版本必须是2.x（不支持3.x）
Python2.7.15下载地址

3.JDK

JDK版本必须是1.8，安装完jdk记得配置java环境变量（不支持1.9及更高版本）
JDK1.8下载地址

4.AndroidStudio

AndroidStudio的下载安装配置不多说了，过程曲折艰难，这里给个链接参考

4.1.安装过程确保选中了以下几项：

Android SDK   
Android SDK Platform   
Performance (Intel ® HAXM)   
Android Virtual Device

使用Android Studio开发Android APP

4.2.SDK版本保证为Android 8.0(oreo),SDK Tools版本保证为26.0.3，模拟器的image选择Oreo

4.3.配置 ANDROIDHOME环境变量，系统中添加一个环境变量命名为 ANDROID_HOME，指向你AndroidSDK的路径

三、创建和运行一个新工程

1.安装react-native：

打开gitbash，输入如下指令：

1	npm install -g yarn react-native-cli

2.在你想要的路径下init工程：

1	react-native init AwesomeProject

init完毕后，你可以使用AndroidStudio打开新创建RN工程目录下的Android工程，编译运行或者进行接下来的操作

3.编译运行前

先查看有没有开启AndroidStudio中的模拟器，或者电脑连接（使用usb数据线或者无线调试）真机设备（需要开启usb调试），如果使用AndroidStudio中的模拟器或者则不需要如下操作：
在gitbash中输入adb devices如果出现有如下返回值：

1
2
3

$ adb devices
List of devices attached
xxxxxx  device

说明当前有设备连接，如果不是说明当前没有设备连接

4.连接成功后执行命令：

1	react-native run-android

如果设备上出现如下图内容，那么恭喜你入坑成功

4.1.如果出现红字诸如：

1	bundling failed: Error: Unable to resolve module /../react-transform-hmr/lib/index.js

你可能会需要如下操作：
4.1.1开启两个gitbash都进入当前工程（AwesomeProject）目录下

4.1.2其中一个gitbash窗口执行

1	react-native start --reset-cache

另一个gitbash窗口执行

1	react-native run-android

4.1.3如果出现RN服务启动失败的情况，请访问此页：故障排除

四、编译和运行从github上clone或者下载的工程

这里以github上的react-native-nba-app作为例子
项目链接：react-native-nba-app

1.下载工程

直接下载或者使用gitbash执行命令：

1	$git clone https://github.com/wwayne/react-native-nba-app.git

clone到本地

2.下载node_modoules文件

进入下载后解压的工程目录下执行命令：

1	npm install

然后执行

1	react-native start

如果遇到如下问题：

ERROR Watcher took too long to load

修改FileWatcher的MAX_WAIT_TIME 时间
路径：
node_modules—>react-native—>packager—>react-packager—>src—>node-haste—>FileWatcher—>index.js
文件里的MAX_WAIT_TIME = 250000;

3.完成后

可以直接打AndroidStudio中打开RN工程目录下的Android工程，编译运行
使用AS编译运行后，摇晃手机打开Dev Settings，在Debug server host & port for device中设置电脑ip和react-native服务端口，服务默认使用端口为8081，电脑ip地址通过命令行ipconfig查看

或者直接在RN工程目录下执行

1	react-native run-android