Android 真机搭建 React-Native 环境踩坑记录

运行 react-native init [your project name] 命令在本地初始化一个 RN 项目

根据网速，这个初始化的速度有快有慢。如果初始化顺利完成，会出现以下提示：

开启本地 RN 服务

cd 进入项目，不需要 npm install ，因为这步 react-native 已经帮你做好了。直接运行 react-native run-ios 或者 react-native run-android ，可以分别启动 RN 的 Android 版本和 iOS 版本的 RN 本地服务器。

我是在 Android 上调试，直接跑命令 react-native run-android ，这时终端会默认启动一个 node 服务进程。注意：在开发过程中，两个窗口都不要关闭，不然 JS 环境下的本地服务会断掉。

windows 环境下 Android Studio 安装

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

提示：关于 Android Studio ，可以去官网，也可以去国内社区下载，如果去官网下载，国内用户必须有稳定的翻墙工具，否则在下载、安装、配置过程中会不断遭遇链接超时或断开，无法进行开发工作。

开始安装

安装 Android Virtual Device

注意：安装的时候需要选中 Android Virtual Device 安装 android 虚拟设备，不然不管是真机还是模拟器都无法打开调试。

安装目录的选择

定义安装目录，这里没什么好说的，不过需要注意尽量不要放在 C:\ 盘下，因为 Android 的 SDK 非常吃内存。

勾选不需要默认启动项

了。

启动 Android Studio 构建 Android 模拟器运行环境

模块。

第一次开启项目，可能会花费比较长的时间， Android Studio 右下角有进度条和 event log ，左下角有终端，能打印包安装和 tasks run 时的信息。首次系统自动安装可能会失败，需要手动点击 Install missing platforms 安装丢失的文件

等到各种依赖、编译完成，右上角的 Virtual Device 控制栏的运行按钮会高亮，选中 app 点击右侧的运行按钮，出现 Virtual Device 选择弹框，这个时候把真机用数据线接入，在真机上设置成 usb 调试数据 。如果设备接入成功，会显示机型和版本号。

注意：这边不推荐使用 Android Studio 自带的模拟器，一来设置麻烦，二来非常吃内存，一般情况下，同时运行 Android Studio 和模拟器，CPU 几乎会被全部吃掉。

报错，这个时候重新启动一下就好。

启动 adb 服务

JavaScript 本地服务启好， Android Studio 环境搭建好，还需要运行 adb 命令开放测试端口

ADB（Android Debug Bridge）是Android SDK中的一个工具, 使用ADB可以直接操作管理Android模拟器或者真实的Andriod设备。ADB是一个客户端-服务器端程序, 其中客户端是你用来操作的电脑, 服务器端是android设备。

还记得你安装 Android Studio 之后，安装 SDK 的目录吗？开启 windows 系统终端， cd 进入 SDK 安装目录下的 platform-tools 文件夹，运行 adb reverse tcp:8081 tcp:8081 命令指定开发端口。

注意： 运行 adb 命令前需要确保 Android 真机和本地服务启动在同一个网段下，简单说就是连了同一个路由器，不然无法建立连接！！

真机运行 RN

真机运行需要三者同时启动成功：

react-native run-android
Android Studio
adb

所有环境搭建完成，此时 Android 真机会自动安装 RN 项目的开发包，自动运行，如果运行成功则会出现如下初始界面：

终于他妈跑起来了，开心的一批，不容易啊。。

真机调试 RN

到此为止，项目算是跑起来了，但是怎么调试呢？在真机上怎么唤出控制台呢？只要摇一摇手机即可。摇一摇手机唤出控制台如下：

来解释一下几个选项的作用：

1. Reload 即刷整个应用，相当于杀掉进程，再重新打开。
2. Debug JS Remotely 在 PC 浏览器上远程打开一个 JS 调试页面，打开浏览器 F12 唤出控制台，能看到各种代码运行的数据，就像写 webview 项目时候一样。只是如果在真机环境下，打开这个选项会变得非常卡，这个我还没有找到好的解决办法。
3. Enable Live Reload 开启自动更改刷新，和单纯 Reload 的区别是，能直接在当前页面刷新，不会从欢迎页再进入一次。和 Enable Hot Reloading 的区别是，能够重新执行该页面的 JavaScript 代码，而 Enable Hot Reloading 只是更换视图层的样式，不会重新执行逻辑。
4. Enable Hot Reloading 热更新，搭建页面时快速看见 Ui 效果时会用
5. 后面的几个我也不知道干啥的，反正对于新手来说，上面四个功能足够用了。