初学者搭建React Native 开发环境

前端_祎
787 阅读6分钟

最近开始学习React Native 框架，准备依照 React Native中文官网 搭建一套原生环境。

开发平台：Windows，目标平台：Android，代码编辑器：VSCode

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

我们看的React Native是0.7版本，对应需要的Node版本应大于等于14，此处Node已经安装，故无Node安装的过程记录，没安装的可自行搜索下载。

JDK

下载安装

需要的JDK为11版本，Oracle JDK下载，可自行注册一个oracle账户下载；也可访问Temurin下载。

若下载的是exe文件，运行安装时记住所选择的安装路径，一般不建议装在C盘。

image.png

若下载的是zip文件，解压后记住文件所在路径即可。

java环境变量配置

1、【用户变量】和【系统变量】各新建2条

变量名：CLASSPATH  变量值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

变量名：JAVA_HOME  变量值：D:\software\JDK\jdk11.0.17（安装目录版本号路径）

2、【系统变量】双击->Path->编辑环境变量->新建3条

%JAVA_HOME%\bin

D:\software\JDK\jdk11.0.17\bin

D:\software\JDK\jdk11.0.17

配置好后，cmd输入 javac -version，即可看到版本号。

image.png

Android Studio

声明！！ 安装过程需使用稳定的代理软件，否则在下载、安装、配置过程中会不断遭遇链接超时或断开。如果报错中出现有网址，那么 99% 就是无法正常连接网络。

首先下载Android Studio

image.png

安装Android Studio

image.png image.png image.png image.png image.png image.png image.png image.png image.png

这里会卡挺久，中途如果有安装失败的，我是直接点了Retry，如果Retry过程中不小心点了Cancel，不用担心，重新打开Android Studio重新装一遍。

image.png

重新打开Android Studio，重复刚才的步骤，进入以下界面时，选择的文件路径与之前保持一致。

image.png image.png

安装好就ok辽

image.png

安装Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 12 (S)版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android 5 以上设备）。可以在Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

image.png image.png image.png image.png

配置 ANDROID_SDK_ROOT 环境变量

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录。

也可通过Android Studio查看SDK 的真实路径。 image.png image.png

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

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把这些工具目录路径添加进去

%ANDROID_HOME%\platform-tools

%ANDROID_HOME%\emulator

%ANDROID_HOME%\tools

%ANDROID_HOME%\tools\bin

image.png

创建新项目

如果你之前全局安装过旧的react-native-cli命令行工具，请卸载掉它以避免一些冲突

npm uninstall -g react-native-cli @react-native-community/cli

React Native支持使用命令和IDE集成开发工具两种方式来创建项目。

npx react-native init AwesomeProject

注意事项：

  • 项目名称不能包含中文、空格等特殊符号，也不要单独使用常见的关键字作为项目名，如 class、native、new等，也请不要使用与核心模块同名的项目名（如 react, react-native 等）
  • 不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！
  • 不要使用一些移植的终端环境，例如git bash或mingw等等，这些在 windows 下可能导致找不到环境变量。请使用系统自带的命令行（CMD 或 powershell）运行。

image.png

如果想把 React Native 集成到现有的原生项目中，参考该官方网址

可指定版本或项目模板

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

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

还可以使用--template来使用一些社区提供的模板，例如带有TypeScript配置的

npx react-native init AwesomeTSProject --template react-native-template-typescript

准备Android设备

需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。Android 官方提供了名为 Android Virtual Device（简称 AVD）的模拟器。此外还有很多第三方提供的模拟器如Genymotion、BlueStack 等。

使用安卓真机

用usb数据线连接到电脑，遵照安卓真机在设备上运行文档操作即可。

使用 Android 模拟器

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

image.png

此处我们刚刚才安装Android Studio，需要先创建一个虚拟设备。

image.png image.png image.png image.png

然后就能看到模拟器了

image.png

这时候我发现我的模拟器点进某个应用之后，再退出来，会有频繁闪回的现象。于是我重新装了一个模拟器，换了一个Phone设备（Pixel 3a），再运行就没有频繁闪回的现象了。

编译并运行React Native应用

无论是命令行方式运行还是VSCode内运行，都要先进入刚刚创建的AwesomeProject文件目录中，再执行命令。

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

运行前，可以使用adb devices命令查看设备连接情况，若出现异常，请仔细检查环境变量的配置情况。

image.png

然后在项目目录中运行yarn android或者yarn react-native run-android。Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载，没有yarn的可以安装下。

npm install -g yarn

命令行运行

一个命令窗口运行 npx react-native start，启动Metro Bundler（React Native 附带的 JavaScript 捆绑器）

一个命令窗口运行npx react-native run-android

image.png

VSCode运行

也是一样，打开两个终端，分别执行npx react-native start和npx react-native run-android

image.png

也可只运行yarn react-native run-android这个命令，此时node自动弹出的弹窗可最小化（此弹窗相当于自动运行了npx react-native start命令），不能关掉。

image.png

耐心等一会，可能十分钟或以上。运行成功之后就能看到应用程序在 Android 模拟器中运行啦！

image.png

修改项目

成功运行项目之后，可以尝试手动改下项目（此处是在VSCode中修改）

  • 打开App.js并随便改上几行
  • 在VSCode终端按两下 R 键（运行npx react-native start命令后提示输r或d的那里），或是在模拟器中选择 Reload，就可以看到最新修改。

image.png

完结撒花~❀❀❀

avatar
文章
阅读
粉丝