以下内容为React-Native在Windows环境下开发Android应用的环境准备与项目初始化,全过程中均需流畅可用的网络支持。
编译所需工具与环境
- Node
- JDK
- Yarn
- Android 开发环境
Node
Node需要下载16.x及以上版本,最好为偶数的LTS (长期维护)版本,下载链接(Previous Releases | Node.js (nodejs.org))。 次外也可以下载NVM(Releases · coreybutler/nvm-windows · GitHub)管理你的Node版本,随时进行切换。
JDK
React-Native 需要 Java Development Kit [JDK] 11,下载链接(Java Downloads | Oracle)。注册安装后可使用命令行工具输入javac -version查看当前安装版本。
Yarn
可以直接使用npm安装
npm install -g yarn
Android 开发环境
Android Studio
首先下载Android Studio安装包(下载 Android Studio 和应用工具 - Android 开发者 | Android Developers (google.cn)),运行安装文件,在安装界面选择"Custom"选项,同时选中以下几项:
- Android SDK
- Android SDK Platform
- Android Virtual Device
然后点击"Next"来安装选中的组件。
Android SDK
然后安装 Android SDK,Android Studio 默认会安装最新版本的 Android SDK。目前编译 React-Native 应用需要的是Android 13 (Tiramisu)版本的 SDK,React-Native 目前支持 android 5 以上设备)。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。
在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 13 (Tiramisu)选项,确保勾选了下面这些组件
- Android SDK Platform 33
- Intel x86 Atom_64 System Image
然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的33.0.0版本。
最后点击"Apply"来下载和安装这些组件。
配置环境变量
配置 ANDROID_HOME 环境变量,打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录。SDK 默认安装目录是C:\Users\你的用户名\AppData\Local\Android\Sdk,同时也可以在Android Studio 的 SDK Manager 中的 Android SDK Location 查看到。
需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。
添加环境变量
把一些工具目录添加到环境变量 Path,打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把这些工具目录路径添加进去:
- %ANDROID_HOME%\platform-tools
- %ANDROID_HOME%\emulator
- %ANDROID_HOME%\tools
- %ANDROID_HOME%\tools\bin
至此环境就安装好了。
项目初始化
卸载旧包
如果你之前全局安装过旧的react-native-cli命令行工具,请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突:
npm uninstall -g react-native-cli @react-native-community/cli
创建项目
直接创建新项目,不过你需要注意以下几点
请
不要在目录、文件名中使用中文、空格等特殊符号。请不要单独使用常见的关键字作为项目名(如 class, native, new, package 等等)。请不要使用与核心模块同名的项目名(如 react, react-native 等)。
请
不要在某些权限敏感的目录例如 System32 目录中 init 项目,会有各种权限限制导致不能运行。
npx react-native@latest init AwesomeProject
创建 Android 模拟器
点击"Create Virtual Device...",然后选择所需的设备类型并点击"Next",然后选择Tiramisu API Level 33 image。
请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行。
编译并运行 React-Native 应用
使用 Android Studio 打开项目下的"android"目录,运行模拟器,然后在你的项目目录中运行yarn android或者yarn react-native run-android:
cd AwesomeProject
yarn android
# 或者
yarn react-native run-android
此命令会对项目的原生部分进行编译,同时在另外一个命令行中启动Metro服务对 js 代码进行实时打包处理(类似 webpack)。Metro服务也可以使用yarn start命令单独启动。
第一次运行时需要下载大量编译依赖,耗时可能数十分钟,依赖下载编译完成可以看到应用自动安装到设备上并开始运行,如以下画面:
至此你就成功运行你的第一个React-Native项目了。