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

主要参考官方文档:reactnative.cn/docs/enviro...

安装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= <math xmlns="http://www.w3.org/1998/Math/MathML"> P A T H : PATH: </math>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就可以了

相关推荐
烛阴19 分钟前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者43 分钟前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js
vivi_and_qiao1 小时前
HTML的form表单
java·前端·html
骑驴看星星a2 小时前
Vue中的scoped属性
前端·javascript·vue.js
四月_h2 小时前
在 Vue 3 + TypeScript 项目中实现主题切换功能
前端·vue.js·typescript
qq_427506082 小时前
vue3写一个简单的时间轴组件
前端·javascript·vue.js
雨枪幻。3 小时前
spring boot开发:一些基础知识
开发语言·前端·javascript
lecepin3 小时前
AI Coding 资讯 2025.8.27
前端·ai编程
TimelessHaze4 小时前
拆解字节面试题:async/await 到底是什么?底层实现 + 最佳实践全解析
前端·javascript·trae
冯志浩4 小时前
React Native 中 `useMemo` 的使用与优化
react native·掘金·金石计划