Windows10 下搭建React Native开发环境(图文超详细)

1、资源准备

• 链接：https://pan.baidu.com/s/1-coHQ003OCo_4fsQDUgUSg 提取码：ccqn
• 注意 Node 的版本必须大于等于 10，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。
  

2、Jdk安装配置

• 配置链接: https://blog.csdn.net/weixin_44187730/article/details/96436791

3、Node安装配置

① 解压Node至指定目录

② 进入node主目录新建node-global(npm组件安装目录)文件夹和node-cache(缓存目录)文件夹。

③ 新建NODE_HOME系统变量

#变量名
NODE_HOME
#变量值
D:\Users\Develop\Tools\Android\node-v10.16.0-win-x64

④ 新建NODE_PATH系统变量

#变量名
NODE_PATH
变量值
D:\Users\Develop\Tools\Android\node-v10.16.0-win-x64\node_modules

⑤ 将NODE_HOME加入系统路径

%NODE_HOME%
%NODE_HOME%\node-global

⑥ 使用node -v npm -v命令测试、正常安装如图所示

⑦ 设置npm组件安装目录及缓存目录

#设置组件安装目录
npm config set prefix “D:\Users\Develop\Tools\Android\node-v10.16.0-win-x64\node-global” 
#设置缓存目录
npm config set cache “D:\Users\Develop\Tools\Android\node-v10.16.0-win-x64\node-cache”

⑧ 设置npm镜像源为淘宝镜像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

⑨ 安装yarn和react-native-cli脚手架

npm install -g yarn react-native-cli

⑩ 设置yarn镜像源为淘宝镜像

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

⑪ 到此、node配置完成

4、Python安装配置

① 双击python-2.7.8.amd64.msi进行安装

② 修改Python安装位置

③ 确认目录及资源

④ 安装完成

⑤ Python安装完成后会自动写入系统变量、无需再次配置

⑥ 使用python --version命令测试、正常安装下图所示:

5、Android SDK配置

① 解压sdk文件夹至指定目录

② 进入android-sdk-windows主目录、

③ 双击SDK Manager.exe打开资源列表、安装如图所示资源

• Tools部分：主要用作编译资源、可勾选较多常用版本即可
• Android模拟器部分(此项需特别注意，切勿下载整个模拟器，切记，切记)：只需要安装如图所示两项即可、安装此两项表示在将项目运行到对应版本设备上可正常编译通过
• Extras部分：其它辅助资源全部安装即可
• 如图所示安装完成大约消耗3.5GB磁盘，切记勿下载整个模拟器(20GB左右)，特别注意
  
  ④ 配置sdk环境变量、新建ANDROID_HOME(尽量使用此名称、有许多地方会自动找此名称对应的路径)系统变量

#变量名
ANDROID_HOME
#变量值
D:\Users\Develop\Tools\Android\android-sdk-windows

⑤ 将ANDROID_HOME加入系统路径

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools

⑥ 使用adb --verison命令测试、正常配置如下图所示:
⑦ 到此、SDK配置完成。

6、VirtualBox 安装配置

• 用作Genymotion安卓模拟器载体
  ① 双击VirtualBox-6.0.10-132072-Win.exe应用程序点击安装
  
  ② 选择安装位置
  
  ③ 注册表即桌面快捷方式创建信息
  
  ④ 开始安装
  
  ⑤ 安装完成
  

7、Genymotion安卓模拟器安装配置

①双击genymotion-2.12.2.exe运行程序并选择安装位置

② 设置工作空间名称

③ 是否创建桌面快捷方式

④ 确认目录信息并安装

⑤ 安装完成后双击桌面图标可启动模拟器控制台、点击ADD可添加模拟器

⑥ 选择对应版本的模拟器后点击Next、确定模拟器配置信息

⑦ 配置确认完成、点击Next即可完成模拟器创建

⑧ 创建完成、选中对应的模拟器、点击Start即可启动模拟器

8、创建测试项目并运行到模拟器

① 打开cmd命令窗口、切换到D:/Users目录下

② 使用脚手架创建RN项目、创建完成会形成testApp项目文件夹

#限制RN版本为0.57.8
react-native init testApp --version 0.57.8

② 使用adb devices命令查看是否有android设备运行

③ 进行testApp主目录、执行react-native run-android、初次运行会下载Gradle(约190MB)编译工具需要较长时间

③ 等待编译完成

④ 到此、运行项目的Android设备完成

9、GRADLE环境配置

①新建GRADLE_HOME系统变量

#变量名
GRADLE_HOME
#变量值
C:\Users\用户名\.gradle\wrapper\dists\gradle-4.4-all\9br9xq1tocpiv8o6njlyu5op1\gradle-4.4

② 将GRADLE_HOME加入系统路径

③ 使用gradle -v命令测试、正常配置如下图所示:

10、到此全部配置完成，有任何问题请留言评论、篇幅过长感谢阅读。