2023搭建ReactNative0.71开发环境--Android_yarn android

前言

ReactNative的从 0.68 版本开始，React Native 提供了新架构，它为开发者提供了构建高性能和响应式应用的新功能。

从0.70 版本开始，引擎默认使用的是Hermes。Hermes 是专门针对 React Native 应用而优化的全新开源 JavaScript 引擎。优化了启动时间，减少内存占用以及空间占用。

截止到2023年一月，ReactNative最新版本为0.71。希望ReactNative生态在2023可以越来越好！！！

ReactNative0.71搭建开发环境

本文优化了搭建环境的步骤，让大家可以轻松在Windows系统搭建ReactNative的Android应用环境。

一、安装Node

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

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

Node 的版本应大于等于 14，安装完 Node 后，建议设置 npm 镜像（淘宝源）以加快下载依赖的速度。

// 使用nrm工具切换淘宝源

npx nrm use taobao
1
2
3

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

// 安装 yarn
npm install -g yarn
1
2

二、Android 开发环境

1. 安装 Android Studio

国内用户AndroidStudio下载官网：https://developer.android.google.cn/studio/。

2023年1月最新AndroidStudio版本为：Android Studio Electric Eel | 2022.1.1

React Native 需要 Java Development Kit [JDK] 11。Android Studio Electric Eel | 2022.1.1中自带的jdk11。

Android Studio 默认会安装最新版本的 Android SDK。

2.准备 Android 设备

你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。

这里暂时不介绍真机调试详细用法，主要介绍模拟器中开发调试应用。

使用 Android 真机

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

使用 Android 模拟器

Android 官方提供了名为 Android Virtual Device（简称 AVD）的模拟器。此外还有很多第三方提供的模拟器如：夜神、BlueStack 等。

你可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备，它的图标看起来像下面这样：

如果你刚刚才安装 Android Studio，那么需要先创建一个虚拟设备。点击"Create Virtual Device…"，

使用Android11.0版本，先要点击下载按钮，下载对应的images

点击下一步、完成

三、创建RN新项目

现在的RN新版本（0.68之后）不再需要react-native-cli工具，如果你之前全局安装过此工具，请卸载掉它以避免一些冲突：
npm uninstall -g react-native-cli @react-native-community/cli

创建React Native项目

直接用 node 自带的npx命令，创建一个名为"AwesomeProject"的新React Native项目：

npx react-native init AwesomeProject
1

必须要看的注意事项：请不要在目录、文件名中使用中文、空格等特殊符号。请不要单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。

请不要使用与核心模块同名的项目名（如 react, react-native 等）。请不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！

如果你是想把 React Native 集成到现有的原生项目中，则步骤有些不同，这里先不介绍。

[可选参数] 指定版本或项目模板

你可以使用--version参数（注意是两个杠）创建指定版本的项目。注意版本号必须精确到两个小数点。

npx react-native init AwesomeProject --version X.XX.X
1

四、编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机

启动方式1：Android Studio 中直接运行Android应用（推荐）

先在命令行运行yarn start命令单独启动Metro服务如下：

然后在Android Studio中打开项目下的android文件，会自动下载依赖，依赖下载完成后点击绿色三角形按钮运行项目

效果如下:

注意，Android项目第一次运行时需要下载大量编译依赖，耗时可能数十分钟。可以尝试阿里云提供的maven 镜像，将android/build.gradle中的jcenter()和google()分别替换为maven { url 'https://maven.aliyun.com/repository/jcenter' }和maven { url 'https://maven.aliyun.com/repository/google' }（注意有多处需要替换）。

启动方式2：yarn android（了解）

此方式运行项目，需要给电脑环境变量配置：jdk11、Android等配置

React Native 需要 Java Development Kit [JDK] 11。下载好jdk并配置好环境变量。你可以在命令行中输入 javac -version（请注意是 javac，不是 java）来查看你当前安装的 JDK 版本。如果版本不合要求，则可以去Temurin或Oracle JDK上下载(后者下载需注册登录)。

低于 0.67 版本的 React Native 需要 JDK 1.8 版本（官方也称 8 版本）

在你的项目目录中运行yarn android，此命令会对项目的原生部分进行编译，同时在另外一个命令行中启动Metro服务对 js 代码进行实时打包处理（类似 webpack）。Metro服务也可以使用yarn start命令单独启动。

cd AwesomeProject
// 运行项目
yarn android

// 或者，此命令等同于yarn android
yarn react-native run-android
1
2
3
4
5
6

修改项目

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

使用你喜欢的文本编辑器打开App.tsx并随便改上几行, 就可以发现模拟器中页面也会跟着发生变化了。

完成了！

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