React Native - 环境搭建（踩坑指南）

官方文档：
https://reactnative.cn/docs/getting-started/


使用环境：
Windows & Android


缩略词：
RN(React Native)、AS(Android Studio)

1. 初始化项目

1.1 需要的环境

• Node
  Node 是 JS 的运行环境,这里注意需要下载的 Node 版本需要8.3以上。
• Python 2
  Python 2的运行环境，这里注意需要下载的python版本为 python 2.x ，不能是 python 3.x。
• JDK
  Java的运行环境，这里注意需要下载的JDK版本为1.8，只能是1.8。

1.2 需要的配置

由于国内把很多东西都墙掉了，国内的良心公司提供了不少代理，为我们的开发带来方便。下面的一些配置信息，由官网提供。

• npm 配置

npm 是 Node.js 的包管理工具，负责下载 js 代码的依赖包，由于被墙，我们需要配置下面的代理。

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

• yarn 配置（可选）

yarn 是用来替代 npm 功能的工具，可以加速 npm 的下载。

npm install -g yarn react-native-cli

安装完成后，依然需要未 yarn 设置代理。

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

2. 开始第一个项目

注意：在开始之前，请确定 1.1 和 1.2 的配置已经完成。

第一步

找到一个你认为合适的位置，执行如下命令，创建一个名为 Self 的 RN 项目：

react-native init Self

执行完成后，打开文件夹，可以看到如下内容：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4PVom2rT-1572181692770)(https://note.youdao.com/yws/api/personal/file/526E1AC5946D424BAFC5B2E9C84B59FB?method=download&shareKey=dd222057245d5f9ab49294ab22bc9d73)]

第二步

连接我们的手机，打开开发者模式-允许usb调试，然后在项目文件夹下执行下面命令：

react-native run-android

执行完成后，会开始下载一些 Android 项目需要的依赖包，然后在手机上运行 App，效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UIpwCJZa-1572181692771)(https://note.youdao.com/yws/api/personal/file/DC14D11743FE4658B26F4EC27F9795A6?method=download&shareKey=7b43cd20bff6d00e215167c822b12019)]

注意：这里手机和电脑需要处于同一网段下，如果不在同一网段，可以左右剧烈摇晃手机，在弹窗中选择 Dev Settings - Debug server host & port for device 选项中输入 IP 和端口。

第三步

修改 App.js 文件，然后重启 App ，看是否能正常显示修改后的内容。

3. 集成 RN 项目到Android（Gradle项目）

3.1 准备工作

所谓准备工作，就是我们的 RN 项目。在集成进入 Android 中之前，我们需要确保我们的 RN 项目中存在 node_modules 这个文件夹。这个文件夹中存在 JavaScript 依赖的所有模块，一般情况下，从 GitHub 上 clone 的项目不会有这个文件夹的。

如果没有这个文件夹，我们需要在项目目录下，执行下面的命令：

npm install

如果使用的 yarn ，还可以直接执行：

yarn

生成的 node_modules 中有很多的文件夹&#