第一节 搭建开发环境

Posted 2020-06-22

# 安装要点：

1. 严格按照官方文档：https://facebook.github.io/react-native/docs/android-setup.html
2. 遇到问题首先在项目git issue里寻找答案。
3. 模拟器：仅安装genymotion模拟器，不需要尝试谷歌自带的，或微软的模拟器，那种速度会非常痛苦。

# 系统准备：
1、系统环境：
C:\WINDOWS\system32>git --version
git version 2.6.4.windows.1

C:\WINDOWS\system32>node -v
v5.4.0

C:\WINDOWS\system32>npm -v
3.3.12

D:\note>react-native --version
react-native-cli: 0.1.10
react-native: 0.21.0
这里注意npm3，以前所有的npm依赖，是目录嵌套目录，现在是平行放在同一个目录下。安装react-native-cli的时候，
版本3是必要的。
非必需：安装了vs2015社区版，注意勾选c++相关模块，有些C++模块可藉此编译。

# 安装jdk(国内正常访问)
http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html
Java Platform, Standard Edition这一节，点击jdk download按钮
在Java SE Development Kit 8u66这一节中，先accept它的协议
因为使用win10，windows x64版本，下载后正常安装。
然后：
1、增加环境变量：
JAVA_HOME,其值为jdk的安装路径：C:\Program Files\Java\jdk1.8.0_66

2、确保Path里有jdk的bin目录
C:\Program Files\Java\jdk1.8.0_66\bin

# 安装android sdk管理工具(国内网站替代)
##安装：
下载sdk manager，这里都选择x64版本，http://androiddevtools.cn/ 在主菜单的android sdk tools中选择sdk tools：
选择Windows installer_r24.3.4-windows.exe
安装完毕后执行sdk manager，要更新的话，科学上网，或者使用淘宝、腾讯的镜像。
将SDK的platform-tools子目录加入系统PATH环境变量。

## 更新android sdk(科学上网)
Define the ANDROID_HOME environment variable 然后重启
值为：C:\Program Files (x86)\Android\android-sdk
这里要严格按照官方文档，该安装的都要安装，没勾的不要安装，注意版本号要一致。

# 安装react-native-cli
npm install -g react-native-cli
这是react native的命令行工具

# 安装react native
执行：
D:\>react-native init note
这个过程很漫长，因为此时才会下载react-native包。
要注意react native包不要全局安装，首次init项目后，会缓存react-native，下次就很快乐。
同时要注意国内的npm源不可用，为了速度快些，可以将https源改为http源
npm config set registry "https://registry.npmjs.org"
初始化项目完毕后，在模拟器成功运行，才意味着安装成功：
1、打开genymotion
2、启动一个模拟器：这里注意，通过模拟器的手机操作，打开wifi并连接上面唯一的热点。
3、开两个命令窗口：
第一个运行：npm start，启动服务，保持监控状态
第二个运行：react-native run-android
在项目运行后修改代码，在模拟器上，右下角找到menu图标，选择ReloadJs即可,不需要每次执行上述步骤。

#遇到的问题
## 问题1：模拟器不能连接
使用模拟器的手机设置功能，打开wifi，连上唯一的热点。
其它不用额外设置。
## 问题2：运行时出错：
原因是使用了国内npm源，改FQ重新init项目，结果正常。

#使用Visual Studio Code

安装了react native支持模块后，按Ctrl+shift+p，输入R
react native:start package 作用等同npm start
react native:run android 等同react-native run-anroid.