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

相关推荐
七夜zippoe1 分钟前
前端开发中的难题及解决方案
前端·问题
Hockor1 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军1 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺1 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到111 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡1 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu1 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂1 小时前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军1 小时前
React 实现多个节点 diff
前端·react.js·前端框架
用户40812812003811 小时前
拓展运算符和剩余参数
前端