RN开发环境的搭建

前言：重要的事情放在最前面，RN开发环境对版本要求比较高，所有环境严格按照指定版本安装，版本不一致无法正常进行

各个环境的搭建遵循三步曲：

1. 安装环境
2. 配置环境变量
3. 检测使用

一、安装python2.x版本

官网传送带：Download Python | Python.org

 安装步骤：傻瓜式next，只是在安装路径部分按个人习惯进行更改（但是路径需要记住，后面配置环境会用到）

1.安装

 接下来就是一直next知道安装结束！

2.配置环境

进入电脑高级配置

 新建环境变量PYTHON_HOME

 

3. 检测使用

输入python命令，看到如下界面说明成功啦！

 二、安装Java环境

官网传送带：Java Downloads | Oracle

1.安装Java jdk 1.8版本

这里不建议更改安装路径，记录下这个环境路径：C:\Program Files\Java\jdk1.8.0_151

继续安装jre ， 注意：jdk和jre安装在同一目录下

 2.配置环境变量

 

 3.检测使用

分别输入java和javac，看到如下界面，说明配置成功了！

 

三、Android环境安装

官网传送带：AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载 SDK Tools下载

 

1.安装Android Studio 3.14版本

 

 拷贝SDK（Android运行环境）到Android目录下，解压

 2.配置环境变量

 

 3.检测使用

命令行窗口中键入 adb devices

 四、Android模拟器安装

这里我要说明一下，我试过了很多方式都不成功，试过Genymotion，与夜神模拟器，连接成功，但是在模拟器上就是跑不起来，由于时间有限，折腾了好久都不行，暂时先跳过这一步，先用真机调试吧！

五、初始化rn项目与真机调试配置

1.rn脚手架准备

        首先要创建rn项目，那么ReactNative脚手架是必不可少的，由于版本限制的原因，所以接下来的操作需要nodeV12.10.0版本支持（如果不用，启动项目的时候会出错，下文又提及），没有nodev12.10.0版本的小伙伴建议下载nvm进行node管理，这样非常方便node的版本切换

• 安装脚手架

npm install -g yarn react-native-cli

•  检测是否安装成功

 2.创建rn项目(注意：项目名不能有中文路径）

react-native init 项目名 --version 0.55.4 （要求必须跟上版本号）
 
例如：react-native init rn_demo --version 0.55.4

        等待下载完毕即可...

3.启动手机（或者手机模拟器）

        由于我这里使用的是手机，所以接下演示说明的以真机为准

注意：电脑连接手机后，手机必须是调试模式/开发这模式，可以在中断执行命令adb devices，显示只要有一个设备即可

 4.启动项目

        进入项目根目录，执行命令：react-native run-android，如果一切顺利的话，那么你就会在手机端看到如下画面，那就大功告成啦！（假设不成功的话，那么可以继续看下文，说说我遇到的问题与如何解决的）

5.常用命令总结：

//使用12版本的node
nvm use v12.10.0
 
//安装react-native脚手架
npm install -g yarn react-native-cli
 
//检测react-native是否安装成功
react-native -v
 
//创建rn项目
react-native init 项目名 --version 0.55.4 （要求必须跟上版本号）
例如：react-native init rn_demo --version 0.55.4
 
//启动项目
react-native run-android
 
//终端查看是否链接设备
adb devices

六、启动项目失败

        在我配置好环境之后，启动项目之后，看到的并不是上图，而是下图：

具体报错信息是：Unable to load script.Make sure you're either running a metro server（ run 'react-native start' ） or that your bundle 'index.android.bundle' is packaged correctly for server. 

这句话的翻译过来大致是：无法从资产的index.android.bundle中加载脚本。确保你的包被正确打包或者你正在运行一个packager服务器，原因即是index.android.bundle  这个文件是不存在（我搜了一下我的文件，确实不存在这个文件）

看了网上很多帖子，基本操作都是：

step1：打开自己的项目文件夹,在Android/app/src/main目录下创建一个空的assets文件夹，

step2：用dos进入项目根目录,也就是执行下面代码：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res 

然而并没有那么顺利，又报错了，说找不到我的index.android.js文件，所以这里向小伙伴们提个醒，可以在项目根目录下，查看你是否有这个文件，其实也是项目的入口文件，只是不同版本下命名不一样，我这里式index.js，所以我将上面的命令改变： 

正确执行下方命令：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res 

这时候你就可以看到刚才新建的assets文件下多了两个文件，则说明成功了：

七、在启动项目时，想生产index.android.bundle包出的错

异常描述：

error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[
\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\
\.*)$/: Unterminated character class

看了网上的帖子，说是node版本照成的，一开始我用的是node14，后面换回12，就解决了这个问题，这也是我为什么在前文提及一定要用node12的版本。

八、修改项目代码发现手机页面没有更新

在项目根目录下执行如下命令可以解决：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res