RN学习笔记——1.RN环境搭建和踩坑

安装Node

css 复制代码

brew install node@18  
brew install watchman

我本地安装的环境如下

makefile 复制代码

bogon:~ xiao$ node -v
v18.13.0
bogon:~ xiao$ npm -v
8.19.3

JDK和Android环境

这部分直接参考官方文档就可以，需要注意的是环境中一定要记得配置模拟器路径，后面启动模拟器会用到

bash 复制代码

export PATH=$PATH:$ANDROID_HOME/emulator

我本地安装的JDK版本如下：

arduino 复制代码

bogon:~ xiao$ java -version
openjdk version "11.0.22" 2024-01-16 LTS
OpenJDK Runtime Environment Corretto-11.0.22.7.1 (build 11.0.22+7-LTS)
OpenJDK 64-Bit Server VM Corretto-11.0.22.7.1 (build 11.0.22+7-LTS, mixed mode)

android环境创建好后，同样参考官方文档创建模拟器，模拟器创建完成后我们可以通过如下命令查看我们的模拟器

创建工程

使用如下命令创建工程

java 复制代码

npx @react-native-community/cli init RNDemo --version 0.72.3

这里我并没有使用最新版本，因为后续还要集成React Navigation，如果不固定版本的话会有很多兼容性问题，这个版本是我已经调试好了的。

安装过程中这里选择N，暂时不考虑IOS

同步Android工程

工程创建完成后，我们用android studio打开android工程（根目录下的android就是android工程）

打开工程遇到的第一个问题就是gradle无法下载的问题，我们可以使用阿里源进行替代

arduino 复制代码

#https://services.gradle.org/distributions
distributionUrl=https://mirrors.aliyun.com/macports/distfiles/gradle/gradle-8.0.1-bin.zip

工程同步完后，我们看看Android工程中有如下几个版本需要注意（后续安装React Navigation会涉及到，不安装可以忽略）：

python 复制代码

gradle版本：https : //mirrors.aliyun.com/macports/distfiles/gradle/gradle-8.0.1-bin.zip
AGP版本（com. android . tools . build :gradle）：7.4.2
kotlin版本：1.7.22

创建模拟器

在android studio中创建模拟器，具体参考官网；

通过如下命令查看模拟器

javascript 复制代码

bogon:RN xiao$ emulator -list-avds
INFO    | Storing crashdata in: /tmp/android-xiao/emu-crash-34.2.16.db, detection is enabled for process: 22192
Pixel_8_Pro_API_29

通过如下命令启动模拟器（前面一定要配置export PATH= $P A T H : PATH:$ PATH:ANDROID_HOME/emulator，否则找不到命令）

复制代码

emulator -avd 你的模拟器名称

运行工程

arduino 复制代码

npm run android

运行工程报错（此时模拟器未启动）

vbnet 复制代码

> RNDemo@0.0.1 android
> react-native run-android

info JS server already running.
info Launching emulator...
error Failed to launch emulator. Reason: The emulator (INFO    | Storing crashdata in: /tmp/android-xiaoguochang/emu-crash-34.2.16.db, detection is enabled for process: 23763) quit before it finished opening. You can try starting the emulator manually from the terminal with: emulator @INFO    | Storing crashdata in: /tmp/android-xiaoguochang/emu-crash-34.2.16.db, detection is enabled for process: 23763.
warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.

这个问题暂时不知道具体原因，但是我们可以手动将模拟器先运行起来

复制代码

emulator -avd Pixel_8_Pro_API_29

然后再运行APP就可以了