React Native环境搭建

React Native环境搭建官方文档：reactnative.cn/docs/enviro...

简介

React Native是由Facebook开发的一个开源框架，允许开发者使用JavaScript来构建移动应用，同时在iOS和Android两大平台上提供近乎原生的用户体验。

优点：

• 通过编写一次代码，开发者可以节省时间和资源，同时覆盖两个主要的移动操作系统。
• React Native的热重载功能进一步提高了开发效率，使得即时预览修改成为可能。
• 它还利用了React的组件化架构，简化了UI的开发过程，有庞大活跃的社区支持，提供了丰富的库和工具。

前言

1. 本次示例前提是使用了vpn。

2. 本次示例用到的版本：

   1. React native 0.73
   2. JDK 17
   3. Node 20.11.0

安装依赖

安装 Node.js：

• 可以选择直接去官网下载最新版本，地址：nodejs.org/en，可以选择稳定版本...

• 或者通过nvm管理node，可下载多个版本并便于切换：

  • 进入github官方仓库地址github.com/coreybutler... ，选择下方的安装包nvm-setup.exe下载并安装。
  • 验证是否安装成功：

  nvm version //如果返回版本号即安装成功

  • 通过nvm下载node版本：

  nvm install latest //下载最新node版本
  nvm install 16.20.2 //下载指定版本
  nvm list //查看所有安装的node版本列表
  nvm use 20 //使用列表中想用的版本，目前配置react native环境用的是20版本，可根据实际情况调整

安装 Yarn：

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载，后续启动项目会用到yarn android。

   npm install -g yarn

安装JDK：

• 官网下载地址：www.oracle.com/java/techno... Installer对应的链接下载并安装。
• 验证是否安装成功：

javac -version //返回版本号即安装成功
//说明：
//这里react native版本是0.73，JDK版本为 17
//如果react native版本低于0.73，JDL版本为 11
//如果react native版本低于0.67，JDL版本为 8

准备Android开发环境

安装 Android Studio：

访问Android Studio官网：developer.android.google.cn/studio/。直接点...

安装 Android SDK：

打开Android Studio ，点击右上角设置按钮，选择SDK Manager：

1. 在 SDK Manager 中选择"SDK Platforms"选项卡，右下角勾选"Show Package Details"。展开Android 13 (Tiramisu)选项，确保勾选了下面这些组件：（参考下面第一张图片）

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

2. 然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的33.0.0版本。你可以同时安装多个其他版本。（参考下面第二张图片）

3. 最后点击右下角按钮"Apply"来下载和安装上面这些选中的组件。

   1. 
   2. 

配置 ANDROID_HOME 环境变量：

控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，输入变量名：ANDROID_HOME，变量值C:\Users\wuzj\AppData\Local\Android\Sdk（路径根据实际路径进行修改，可在上图SDK Manager中看到路径）

把一些工具目录添加到环境变量 Path：

控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，找到Path，编辑，将以下四个工具目录路径添加进去。

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

创建React Native项目

npx react-native@latest init AwesomeProject //创建最新版的react native项目
// 若创建指定版本的项目：npx react-native@X.XX.X init AwesomeProject --version X.XX.X
// 若有冲突卸载react-native-cli命令:npm uninstall -g react-native-cli @react-native-community/cli

准备Android模拟器

可以使用android真机或者android模拟器来运行react native android应用。

这里使用的是android官方的模拟器 Android Virtual Device（简称 AVD）。

步骤：

1. 打开Android Studio，找到右上角的手机符号进入Device Manager。
2. 点击加号新建一个模拟设备，如下面两幅图所示即可完成。

编译并运行React Native项目

运行模拟器：

打开Android Studio，找到右上角的Device Manager，点击运行按钮，启动上面创建的模拟器。

启动项目：

打开命令行工具，进入项目目录下，执行下面的命令：

yarn android //启动

解决报错：

在有代理的情况下，直接运行会报错，如图所示

解决办法：

用Visual Studio打开项目，找到android文件夹下gradle.properties文件，在最底部加上下面两行代码。

systemProp.https.proxyHost=127.0.0.1 //代理服务器IP
systemProp.https.proxyPort=7890 //代理服务器端口

再次在命令行输入yarn android命令，等待几分钟即可成功运行，如图所示：