手把手教你 react-native 环境配置

手把手教你 react-native 环境配置

注：
可参考RN中文网或RN官网

环境： windows10 家庭中文版 64bit 1909

CPU Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
GPU NVIDIA GeForce GTX 1050 Ti

AMD处理器可能安装模拟器可能会遇到驱动无法安装的情况

---

我们主要要安装的东西有四个：Node.js RN的命令行插件 Java开发者工具包(JDK) Android Studio

1. 安装 Chocolatey

Chocolatey是windows平台下的一个包管理工具，可以很方便的安装我们需要的一些工具。我们使用powershell命令行工具来安装(记住不是cmd)，并且记得用管理员模式打开。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

在命令行中输入上面的命令(直接粘贴即可)，然后执行过程中如果等待时间过长一般都是网络问题，可以多试几次，我试了两次就好了。如果中途失败，然后提示你已经安装了，需要更新之类的。。就去环境变量表里找到chocolatey的目录，然后把带chocolatey字眼的目录全删掉，再删掉环境变量。然后重新执行上述命令即可。

执行成功的样子大概长这样

• 在命令行中输入choco，回车可以执行，没有报错即可。

1.1 安装JDK和Node.js

如果上一步你成功安装choco的话，接下来就很快了。接下来还是在管理员权限下的powershell命令行中输入命令

choco install -y nodejs.install openjdk8

上面命令是用来安装node.js和jdk的，如果你之前安装过了，确保nodeJS的版本≥10，JDK版本≥8。因为choco的源比较慢，如果超时也多试几次。

如果一个命令只安装成功了一个软件，那么不妨按照两行命令单独跑。鉴于国内的网速，更推荐下面两行命令。

choco install -y nodejs.install
choco install -y openjdk8

反正这个过程就是很艰难。。。。因为choco就一个源，国内访问还很慢。一点办法也没有，除非翻墙(这里是正规渠道，就不用这个方法了)。白天可能比较好，因为大洋彼岸在睡觉。所以早起学习的同学们可能会比较吃香。

• Node安装成功示意图

安装完Node之后，在命令行(cmd也可以)中输入 node

就说明安装成功了。

• JDK安装成功示意图

JDK出现上面的画面应该就安装成功了。可以按照下面的方法测试：

2 安装Android Studio

下面的链接可以跳转到官方去下载。

下载Android Studio

2.1 安装过程

• 用管理员身份运行

• 全部勾选

• 选择安装目录

• 安装

• 完成

2.2 启动配置

• 初次启动 进入页面

• 选择custom

• jdk选择我们之前安装好的环境

• 皮肤默认就行了，今后我们也不会用Android studio来开发

• 可以勾选的都勾选上(有些因为我之前安装过了，卸不干净)，然后finish就行了
  

• 等待下载

• 安装完成(这一步可能比较慢)

2.3 配置安卓 SDK

• 进入初始界面

• 点击**Configure->SDK Manager **

• 选择Show Package Detail

• 然后找到Android10，勾选下面的 Android SDK Platform 29 和 Intel x86 Atom_64 System Image

• 然后在上面的切换栏里点击SDK Tools 并勾选下面的 Show Package Detail

• 找到 Android SDK Build-Tools 并选择 29.0.2 (如果有的话就不必勾选了)

• 然后点击apply 和确认下载

• 在两个协议处点击Accept

• 然后点击next，就会开始下载

2.4 配置SDK环境变量

配置完android studio 可能第一次打开会打不开，重启一下就OK了

• 检查SDK安装目录，我们回到SDK manager 界面，看一下自己的SDK安装在哪里，复制这个地址。

• 打开系统环境变量界面(不会的可以自行百度一下)，找不到的可以直接用小娜搜索"环境变量"

• 点击系统变量下方的新建，变量值设置为自己的安装目录(别照搬我的)，然后确定

• 可以在cmd中输入Get-ChildItem -Path Env:\ 来查看是否配置成功

• 然后点击Path->新建

• 按照下面的格式填充 安装SDk的目录+\platform-tools。 然后依次点击确定，退出环境变量设置界面

3 安装React-Native Command Line Interface

• 打开命令行工具(powershell或者cmd) ，进入一个目录 我这里进入F盘下的project。建议先自己新建一个目录，然后再到这个目录下。比如用cd D: && mkdir test && cd test

• 输入下面的命令 其中 AwesomeProject 表示你要新建的项目的名称，可以替换成你喜欢的名字比如ironMan。

npx react-native init AwesomeProject

​ 你也可以使用下面的命令来控制安装的版本，其中X.XX.X代表版本号

npx react-native init AwesomeProject --version X.XX.X

• 初始化项目成功，然后这里提示npm需要升级，我就按照它的提示命令升级了一下，这一步可以不做。

• 查看项目目录 在你新建项目的目录下，会发现多了一个AwesomeProject项目，里面有很多文件。

4 新建虚拟机

为了让我们的RN项目可以边调试边编辑，我们需要一台虚拟机。当然也可用安卓实体机替代，只需要连接USB线，并且点击允许电脑调试即可。

• 打开Android Studio，进入Configure->AVD Manager目录下

• 删除原来的虚拟机 (右键->delete) 我不太喜欢原来的虚拟机，所以我这里删掉再新建

• 点击新建

• 我选择了 Pixel 3a XL这个机型，因为它的分辨率和一般手机差不多, 记得选择没有Play Store的

• 选择镜像 x86->Android 10

• 点击Finish
  

• 然后关掉就OK了

5 运行项目

• 还是在刚才那个目录上打开命令行工具
  

• 进入你创建的项目目录中 然后输入下面的命令 这样会启动react-native的后台对话框

npx react-native start

• 新建一个命令行对话框，同样进入到刚才那个目录

• 运行下面的命令 这样就可以运行项目了 初次编译会比较慢(因为RN会将代码先编译为Java)

这个过程你会发现虚拟机被调起，这是正常现象

npx react-native run-android

• 项目运行成功 出现这个界面后，接下来你就可以开始RN的学习了

• 修改项目 打开 根目录下的App.js文件，修改如下代码

• 查看虚拟机：

6 完结撒花