react-native环境搭建

因为移动应用开发这门课程要用到react-native，下载配置起来是相当麻烦，一不留神就掉坑里。所以这篇博客主要记录react-native环境的搭建以及遇到的问题解决办法。
1. 安装java jdk
（1）官网下载java 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指令检查是否配置成功，如果成功将会显示

2. 安装Node.js

Node.js去官网下载，Node.js官网
建议安装长期支持版本，不要安装最新的

安装完成后打开cmd输入指令node -v查看node.js版本。

3.安装Git

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

4.下载Andriod Studio

Andriod Studio下载地址

根据电脑系统会选择下载，如果是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的安装路径。
   下载完成后也要下载相应的一些依赖
   
   
   下载SDK和NDK，然后配置SDK环境变量
   （1）新增变量名：ANDROID_SDK_HOME
   变量值：（SDK的安装路径）
   （2）修改变量Path：
   在系统变量Path 中新增加两项：%ANDROID_SDK_HOME%\tools;%ANDROID_SDK_HOME%\platform-tools;
   如果SDK环境配置不成功加载项目的时候会出现找不到SDK的情况。

5.安装模拟器

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

6.安装React-native-cli

在cmd中输入指令npm install -g react-native-cli

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路径


打开FirstApp文件夹，当所有步骤运行成功后就可以编辑App.js进行修改。

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

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

10.运行项目

用Andriod Studio打开FirstApp

找到andriod,点击OK

依次输入指令
adb reverse tcp:8081 tcp:8081
npx react-native run-android
运行成功以后会出现以下界面：


运行成功以后模拟器会出现：

恭喜你，运行成功。
如果出现这种界面
说明没连接到服务器，别担心，点击菜单键，点击Settings


点击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


这些步骤可能不是太详细，欢迎探讨。