React-Native环境搭建与项目初始化

366 阅读4分钟

以下内容为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。

image.png

在 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 查看到。

image.png

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

添加环境变量

把一些工具目录添加到环境变量 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。

image.png

image.png

请不要轻易点击 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命令单独启动。 第一次运行时需要下载大量编译依赖,耗时可能数十分钟,依赖下载编译完成可以看到应用自动安装到设备上并开始运行,如以下画面:

Snipaste_2023-11-13_22-31-08.png

至此你就成功运行你的第一个React-Native项目了。