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就可以了

相关推荐
全宝2 分钟前
🗺️【ArcGIS】解决图层无法置顶的问题
前端·javascript·gis
wangmengxxw11 分钟前
SpringMVC-拦截器
java·开发语言·前端
jingling55523 分钟前
UniApp 实现顶部固定导航栏 Tab 及滚动变色效果
前端·javascript·前端框架·uni-app
kymjs张涛1 小时前
零一开源|前沿技术周刊 #10
java·前端·面试
Sawtone1 小时前
[前端] Leader:可以不用但要知道😠一文速查 TypeScript 基础知识点,字典式速查,全文干货!
前端
Wcowin1 小时前
mkdocs-document-dates
前端·github
用户10220791757111 小时前
表格拖拽原生实现
前端·javascript
五月君_1 小时前
见证历史:Vite 首次超越 Webpack!
前端·webpack·node.js
小old弟1 小时前
前端开发,Promise 从原理到实现,一文通
前端
nickzone1 小时前
Next.js + Shopify OAuth 第三方应用接入完整指南
前端