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

文章目录

1、资源准备2、Jdk安装配置3、Node安装配置4、Python安装配置5、Android SDK配置6、VirtualBox 安装配置7、Genymotion安卓模拟器安装配置8、创建测试项目并运行到模拟器9、GRADLE环境配置10、到此全部配置完成，==有任何问题请留言评论、篇幅过长感谢阅读。==

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、到此全部配置完成，有任何问题请留言评论、篇幅过长感谢阅读。