手把手教你 react-native 环境配置
环境: 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
下面的链接可以跳转到官方去下载。
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文件,修改如下代码
- 查看虚拟机: