5、Android搭建RN开发环境

React Native 中文网: https://reactnative.cn/docs/getting-started.html

react native环境搭建windows:

https://blog.csdn.net/ljx1048900106/article/details/108282012

https://blog.csdn.net/weixin_37968345/article/details/80621023

开发平台：window 目标平台：Android

开发软件依赖

必须安装的依赖有：Node、Python2 以及 JDK 和 Android Studio。

虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

注意 Node 的版本必须大于等于 10，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。

Node

注：1. Node 的版本必须大于等于 10

2.安装指定版本node 官网下载历史版本，仅zip格式选择， node v13.10.1 （node -v）

npm v6.13.7 （npm -v）, 之后参考https://www.cnblogs.com/lxg0/p/9472851.html （环境变量、global和cache）

下载地址Node.js 7.6.0或者(搜索Node.js中文网)，与React Native构建平台使用node版本一致

安装完 node 后建议设置 npm 镜像以加速安装第三方依赖。

注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

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

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

Python2

注：目前不支持Python3版本

下载地址

Python 2.7.16

Python 2.7.18: https://www.python.org/downloads/release/python-2718/

下载后直接安装即可

Windows10安装Python2.7: https://blog.csdn.net/u011781521/article/details/53909151

React Native

在node.js安装成功后可以通过npm install的命令来安装React Native Cli的命令行工具，打开cmd，输入如下的命令：

npm install -g react-native-cli,安装完成后就会显示下载的命令行工具的版本

查看react-native版本： react-native -v

//安装指定版本

npm uninstall react-native

npm install --save react-native@0.59.1

Yarn、React Native 的命令行工具（react-native-cli）

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

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

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

命令行快捷键（win+R）

命令行截图：

Android 开发环境

React Native 目前需要Android Studio2.0或更高版本

Android Studio 需要 Java Development Kit [JDK] 1.8（暂不支持更高版本）。你可以在命令行中输入 javac -version来查看你当前安装的 JDK 版本。如果版本不合要求，则可以到官网上下载

1. 安装 Android Studio

首先下载和安装 Android Studio，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项：

Android SDK
Android SDK Platform
Performance (Intel ® HAXM) (AMD 处理器看这里)
Android Virtual Device

然后点击"Next"来安装选中的组件。

如果选择框是灰的，你也可以先跳过，稍后再来安装这些组件。

安装完成后，看到欢迎界面时，就可以进行下面的操作了。

2. 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android4.1 以上设备）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

Android SDK Platform 28
Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

最后点击"Apply"来下载和安装这些组件。

3. 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（具体的路径可能和下图不一致，请自行确认）：

SDK 默认是安装在下面的目录：

c:\Users\你的用户名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android SDK。

你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。

4. 把 platform-tools 目录添加到环境变量 Path 中

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。

此目录的默认路径为：

c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools

创建新项目

使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目：

react-native init AwesomeProject

提示：你可以使用--version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

Windows 用户请注意，请不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！

如果你是想把 React Native 集成到现有的原生项目中，则步骤完全不同，请参考集成到现有原生应用。

准备 Android 设备

你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。后面我们所有的文档除非特别说明，并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device（简称 AVD）的模拟器。此外还有很多第三方提供的模拟器如Genymotion、BlueStack 等。一般来说官方模拟器免费、功能完整，但性能较差。第三方模拟器性能较好，但可能需要付费，或带有广告。

使用 Android 真机

你也可以使用 Android 真机来代替模拟器进行开发，只需用 usb 数据线连接到电脑，然后遵照在设备上运行这篇文档的说明操作即可。

1. 开启 USB 调试

在默认情况下 Android 设备只能从应用市场来安装应用。你需要开启 USB 调试才能自由安装开发版本的 APP。

首先，确定你已经打开设备的 USB 调试开关。

2. 通过 USB 数据线连接设备

下面检查你的设备是否能正确连接到 ADB（Android Debug Bridge），使用adb devices命令行：

$ adb devices
List of devices attached
emulator-5554 offline   # Google emulator
14ed2fcc device         # Physical device

在右边那列看到device说明你的设备已经被正确连接了。注意，你每次只应当连接一个设备。

译注：如果你连接了多个设备（包含模拟器在内），后续的一些操作可能会失败。拔掉不需要的设备，或者关掉模拟器，确保 adb devices 的输出只有一个是连接状态。

命令行截图：

使用 Android 模拟器（看官方）

编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行react-native run-android命令行，来在设备上安装并启动应用了:

cd AwesomeProject

react-native run-android

提示

你还可以运行react-native run-android --variant=release来安装 release 版的应用。当然你需要先配置好签名，且此时无法再开启开发者菜单。注意在 debug 和 release 版本间来回切换安装时可能会报错签名不匹配，此时需要先卸载前一个版本再尝试安装。

如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的翻墙工具，否则将频繁遭遇链接超时和断开，导致无法运行。

命令行截图：

完成了！

恭喜！你已经成功运行你的第一个 React Native 应用。