1.环境配置

[Leooonard]

本文讲解了我如何在windows环境下配置react-native的android运行环境, 分安装步骤讲解, 踩坑血泪史两部分.

1. 安装步骤讲解

环境配置文档. 依照文章内的步骤进行即可. 注意1: 模拟器采用了facebook官网推荐的genymotion.

2. 踩坑血泪史

1. 由于GFW的关系, 在执行react-native init YourProjectName这一步骤时, 很有可能失败. 所以需要事先将源切换至国内, 执行:

npm config set registry  https://registry.npm.taobao.org //修改源至国内, 加快下载速度.
npm info react-native //如果很快的显示包信息, 那就是修改源成功.

切换源后执行init, 等待一会儿后即可成功. 2. 在使用react-native run-android后, react-native会跑./android/gradlew.bat文件. 这个bat文件的作用在于

1. 检查本机环境, 比如是否已经安装jdk.
2. 运行./android/gradle/wrapper/gradle-wrapper.jar文件, 文件会执行gradle的下载, 依赖库的下载以及打包. gradle下载过程很坑, 速度十分缓慢, 需要将其下载地址改成国内更快的地址. 其地址定义在了同目录下的properties文件内, 修改后执行命令gradlew.bat installDebug

3. 在运行run-android前, 需要先使用./packager.sh来开启packager, packager的作用应该是作为一个server, 来为程序提供jsbundle的下载(这个有部分是我的猜测, 欢迎指正). packager默认使用8081端口, 该端口很有可能已经被占用(在这上面卡了2个小时T_T), 有两个解决方案:

1. 在terminal内查找占用8081的进程, 然后杀而后快. 具体指令为netstat -nao然后一行一行找吧...(这里如果用netstat -nao | grep 8081搜不出东西, 不知道为什么), 找到8081对应的进程号后, 去任务管理器内杀掉.
2. 在启动packager.sh时, 使用我们自定义的端口, 方法为./packager.sh --port=xxxx

4. 最后需要在手机上配置server的ip地址, 使其能够下载jsbundle, 配置方法为按菜单按钮, 选择dev settings, 然后选择ip address & port 那个, 这里需要注意port!!!(白白费了快1个小时的痛!!!T_T), 如果不填port, 就默认8080了, 那么ip地址即使填对了也没用, 需要以如下形式填写ip address:port.

5. 本文使用genymotion作为模拟器, 由于它是在virtualbox的基础之上执行, 所以你在本机使用ipconfig能够获得两个ip地址, 注意要使用virtualbox host-only network对应的那个ip.

最后, welcome to react native!

本文是react-native-study系列的第一篇(也有可能只有一篇 -_,-), 之后的系列中会首先介绍与react相关的概念. 毕竟, react-native is based on react.