react-native环境搭建教程

川长思鸟来 2023-07-14 13:00 1阅读 0赞

因为移动应用开发这门课程要用到react-native，下载配置起来是相当麻烦，一不留神就掉坑里。所以这篇博客主要记录react-native环境的搭建以及遇到的问题解决办法。  
**1. 安装java jdk**  
（1）官网下载java jdk安装包  
[JDK官网链接][JDK]，根据电脑属性下载就好，下载完成后next就完事了。  
(2)配置环境变量

1.  修改环境变量，新增JAVA\_HOME的系统环境变量，值为C:\\Program Files (x86)\\Java\\jdk1.8.0\_112，也就是安装JDK的根目录
2.  修改系统环境变量Path，在Path之后新增%JAVA\_HOME%\\bin;%JAVA\_HOME%\\jre\\bin;
3.  新建系统环境变量CLASSPATH，值为.;%JAVA\_HOME%\\lib\\dt.jar;%JAVA\_HOME%\\lib\\tools.jar;
4.  保存对环境变量的修改，重启电脑。
5.  重启后在cmd中输入java -version指令检查是否配置成功，如果成功将会显示![在这里插入图片描述][20200314194314136.png]

###### **2. 安装Node.js** ######

Node.js去官网下载，[Node.js官网][Node.js]  
建议安装长期支持版本，不要安装最新的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]  
安装完成后打开cmd输入指令node -v查看node.js版本。

##### **3.安装Git** #####

Git去官网下载，[Git官网][Git]，根据电脑系统下载安装。

##### **4.下载Andriod Studio** #####

[Andriod Studio下载地址][Andriod Studio]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 1]  
根据电脑系统会选择下载，如果是Windows系统就选android-studio-ide-192.6241897-windows.exe  
打开bin目录下的studio.exe进行安装，安装完成后进行环境变量配置：

1.  新增ANDROID\_HOME的系统环境变量，值为安装sdk的根目录；
2.  在Path之后新增%ANDROID\_HOME%\\tools;%ANDROID\_HOME%\\platform-tools；
3.  在Path之后新增（android studio所安装目录，adb.exe 所在文件夹），也就是adb.exe的安装路径。  
    下载完成后也要下载相应的一些依赖  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 3]  
    下载SDK和NDK，然后配置SDK环境变量  
    （1）新增变量名：ANDROID\_SDK\_HOME  
    变量值：（SDK的安装路径）  
    （2）修改变量Path：  
    在系统变量Path 中新增加两项：%ANDROID\_SDK\_HOME%\\tools;%ANDROID\_SDK\_HOME%\\platform-tools;  
    如果SDK环境配置不成功加载项目的时候会出现找不到SDK的情况。

##### **5.安装模拟器** #####

模拟器有很多选择，但个人推荐用夜神模拟器，下面的某些教程也是以夜神模拟器为例。  
[夜神模拟器官网][Link 1]

##### **6.安装React-native-cli** #####

在cmd中输入指令npm install -g react-native-cli  
![在这里插入图片描述][20200314202900534.jpg]

##### **7.淘宝镜像** #####

此时因为要下载大量的包，可以翻墙也可以用淘宝镜像。  
打开cmd，输入以下三条指令依次执行：  
npm install -g nrm  
npm install -g npm@2  
npm install -g cnpm --registry=http://registry.npm.taobao.org

##### **8.初始化项目** #####

淘宝镜像成功后进行项目的初始化，输入指令 react-native init FirstApp（FirstApp是初始化项目的名称）  
初始化成功的项目一般在C:\\Users\\DELL路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 5]  
打开FirstApp文件夹，当所有步骤运行成功后就可以编辑App.js进行修改。

##### \*\*9.连接夜神模拟器 \*\* #####

输入指令adb connect 127.0.0.1:62001，连接以后输入指令adb devices查看是否有模拟器配置；

##### **10.运行项目** #####

用Andriod Studio打开FirstApp  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 6]  
找到andriod,点击OK  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 7]  
依次输入指令  
adb reverse tcp:8081 tcp:8081  
npx react-native run-android  
运行成功以后会出现以下界面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 9]  
运行成功以后模拟器会出现：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 10]  
恭喜你，运行成功。  
如果出现这种界面![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 11]  
说明没连接到服务器，别担心，点击菜单键，点击Settings  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 12]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 13]  
点击Debug server host & port for device进行IP地址和端口号的配置，如果是夜神模拟器端口号必须是8081，IP地址就是电脑的IP。  
然后点击摇一摇，再点击Reload刷新，就会出现Welcome to React界面。  
**切记：淘宝镜像一定要成功，不然会少下载很多包**

当退出重新运行的时候只需要运行以下几条命令：  
adb connect 127.0.0.1:62001  
adb reverse tcp:8081 tcp:8081  
npx react-native run-android  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 14]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 15]  
这些步骤可能不是太详细，欢迎探讨。

[JDK]: https://www.oracle.com/java/technologies/javase-jdk8-downloads.html#license-lightbox
[20200314194314136.png]: /images/20230529/22e3dce356b342849c9532ff5148bfca.png
[Node.js]: https://nodejs.org/zh-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]: /images/20230529/b8e8cc96226241c8ad9e450cad7685d2.png
[Git]: https://git-scm.com/downloads
[Andriod Studio]: https://developer.android.google.cn/studio/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 1]: /images/20230529/10749260ec74458c9451a1071522be59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 2]: /images/20230529/282f2ef5ace748d493d22f949ffaa252.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 3]: /images/20230529/e3a31ba6d47644b8af98459745cdfd61.png
[Link 1]: https://www.yeshen.com/
[20200314202900534.jpg]: /images/20230529/47f0e7d03d79497eadd2d6d42b93b8b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 4]: /images/20230529/476e303beb9f40648636d730c6589be5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 5]: /images/20230529/4caff414da3c4d58b6087eab08616879.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 6]: /images/20230529/e3bdc9e8bae340b183deab9131640131.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 7]: /images/20230529/a6fe01ac7eb946e397c1aabb8fc8f66e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 8]: /images/20230529/71fd261ee8624d25b7da51c0a679bbe6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 9]: /images/20230529/f27a31c1071f4897a0673a86eb7241b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 10]: /images/20230529/a9c43d0e7122442a8f45370b141f134c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 11]: /images/20230529/87fa3d9f58d84ec2993bbfa286a7a8e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 12]: /images/20230529/4e7ce42d116646cfb2d00390cc648131.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 13]: /images/20230529/590169b6f41044ef83fa97435db6b8bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 14]: /images/20230529/dbf6e4793c3f41cf80f8cea04bc29538.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 15]: /images/20230529/7524e857809a4ebfbfbdc0387da7e778.png