①RN 开发环境搭建

Spring Boot 系列那么多文章却没有标号，看起来都不知道从哪里开始（其实以自学记录为根一篇篇往下读是 ok 的），感觉很乱。所以 RN 系列会在文章标题标号。当然，Spring Boot 后面应该也会加上标号。
本篇参考教程：搭建开发环境・React Native 中文网 (react-native.cn)
RN 中文网：React Native 中文网・使用 React 来编写原生应用的框架 (react-native.cn)

# 开头的碎碎念

RN 是 React Native 的简称。后面统一都说 RN 了。
有点好笑的是，好像是 2024 国庆节假期在家说要自学 RN，结果后来因为装错了盘装到 C 盘去了导致 C 盘爆了于是把原本装好的 Android Studio 和模拟机都删了。现在又要重拾 RN 了（其实之前装好了环境运行了实例应用后也没再学些什么）
RN 毕竟还是出自 React 啊！就这个组件爽！就这个 JS 爽！就这个热更新爽（点名批评没有热更新的 SpringBoot）！
算了废话不多说，让我们开始正题吧。

# 安装依赖

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

你可以在安装完 Android Studio 后选择使用 Webstorm 或者 VSC 来编写你的项目。

# Node, JDK

这个建议直接去找教程。因为我电脑之前就有这两个环境了，所以跳过。
可参考教程：
2024 最新版 Node.js 下载安装及环境配置教程【保姆级_nodejs 下载 - CSDN 博客
JDK17 在 Windows 安装以及环境变量配置（超详细的教程_jdk17 安装教程详细 - CSDN 博客

关于 nodejs，也可以装个 nvm，用于快速管理切换 nodejs 版本。

nodejs 需要版本大于等于 18，JDK 需要版本 17

# yarn

Yarn 是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

npm install -g yarn

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

虽然我还是更习惯用 npm install 哈、

# Android 开发环境

这一段最容易出错，请小心对待！

# 1. 安装 Android Studio

首先下载和安装 Android Studio。这可能需要魔法。安装界面中选择 "Custom" 选项，确保选中了以下几项：

• Android SDK
• Android SDK Platform
• Android Virtual Device
  然后点击 "Next" 来安装选中的组件。

# 2. 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是 Android 15 (VanillaIceCream) 版本的 SDK。你可以在 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 15 (VanillaIceCream) 选项，确保勾选了下面这些组件（如果你看不到这个界面，则需要使用稳定的代理软件）：

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

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

最后点击 "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. 把工具目录添加到环境变量 Path

选中系统环境变量中的 Path 变量，然后点击编辑。点击新建然后把以下工具目录路径添加进去：

%ANDROID_HOME%\platform-tools

# 创建 RN 项目

使用 React Native 内建的命令行工具来创建一个名为 "AwesomeProject" 的新项目。这个命令行工具不需要安装，可以直接用 node 自带的 npx 命令来使用。
在你想创建项目的文件夹下，进行 RN 初始化：

npx @react-native-community/cli init AwesomeProject

AwesomeProject 是项目名，你可以改成自己喜欢的。

请 不要 在目录、文件名中使用 中文、空格 等特殊符号。请 不要 单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请 不要 使用与核心模块同名的项目名（如 react, react-native 等）。

现在你可以用你自己喜欢的 IDE 打开 AwesomeProject 文件夹了。我用的是 Webstorm，不需要另外装其他东西。如果用 VSC 的话，可能还需要装其他的插件，可以自己搜一下。
当然，你想直接在 Android Studio 里写也是可以的。

# 准备 Android 运行设备

两种方式：真机调试或者下载虚拟机。我这里使用真机。

# 真机调试

我的手机是荣耀。先把手机开启开发者模式，进入设置中的开发人员选项，开启 USB 调试。
然后用 USB 连接电脑，跳出提示连接方式，选择文件传输。
然后在开发人员选项里的选择 USB 配置里选择 RNDIS (USB 以太网)。
手机这个时候可能会跳出请求连接的弹窗，点击同意即可。
可以在电脑的终端里输入 adb devices 来检测是否连接成功：

PS C:\Users\Erin> adb devices

List of devices attached

A7QK023508000889        device

list 中出现设备并且标识为 device 则连接成功。

参考：Android 真机调试 ——ADB 调试（含华为手机无法找到设备_华为 adb-CSDN 博客

# 虚拟机调试

在上方菜单 Tools 中找到 Device Manager，点击加号，创建虚拟机。选择自己喜欢的下一个就行。然后启动虚拟机设备。

# 编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行 yarn android 或者 yarn react-native run-android ：

cd AwesomeProjectyarn android

# 或者

yarn react-native run-android

如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程 严重依赖稳定的代理软件 ，否则将频繁遭遇链接超时和断开，导致无法运行。
这个时候会再跳出来一个终端，不要关闭它。

# 修改项目

现在你已经成功运行了项目，我们可以开始尝试动手改一改了：

• 使用你喜欢的文本编辑器打开 App.tsx 并随便改上几行
• 在 nodejs 的终端按下 r 键或者自己保存代码就可以实时看到更改（我爱热更新）。

此外由于我用的真机调试嘛，手机上会跳出来安装软件的页面，记得要手动确认安装一下。

我发现，我虽然用 Webstrom 写代码，但是运行的时候不能关闭 Android Studio，不然手机会连接不上。

完成了！恭喜！你已经成功运行并修改了你的第一个 React Native 应用。