React Native (RN)项目在web、Android和IOS上运行

必须切换淘宝镜像,否则会一直拉取失败

1、环境搭建:

https://reactnative.cn/docs/environment-setup

2、一键清理 Node 依赖与 npx 缓存,在项目根目录执行: (如果有旧的RN cli)

c 复制代码
//删除项目依赖
rm -rf node_modules

//删除 npm 锁文件(如存在)
rm -f package-lock.json yarn.lock

//清理 npm 全局缓存
npm cache clean --force

// 删除 npx 临时缓存
rm -rf ~/.npm/_npx

3、启动顺序

在vscode 终端中先启动(项目根目录)

c‘ 复制代码
//只启动 Metro 打包服务(开发服务器)
npx react-native start

然后在另一个终端中启动(如果只执行,这一步,会自动在外面窗口启动 Metro,会报一些错误:如error (0 , _util.styleText) is not a function.)

c 复制代码
//启动 Metro + 编译并安装 Android 应用到设备上
yarn android / npx react-native run-android
//OR
yarn ios

4、常用命令

Node 是"运行环境",npm 是"它自带的包管理工具"。

c 复制代码
node -v
v22.12.0
npm -v
11.6.2
nvm ls
nvm use v22.12.0

5、Android 预览

6、IOS 预览


相关推荐
fruge2 小时前
前端正则表达式实战合集:表单验证与字符串处理高频场景
前端·正则表达式
baozj2 小时前
🚀 手动改 500 个文件?不存在的!我用 AST 撸了个 Vue 国际化神器
前端·javascript·vue.js
下位子2 小时前
『OpenGL学习滤镜相机』- Day7: FBO(帧缓冲对象)
android·opengl
用户4099322502122 小时前
为什么Vue 3的计算属性能解决模板臃肿、性能优化和双向同步三大痛点?
前端·ai编程·trae
海云前端12 小时前
Vue首屏加速秘籍 组件按需加载真能省一半时间
前端
從南走到北2 小时前
JAVA国际版同城外卖跑腿团购到店跑腿多合一APP系统源码支持Android+IOS+H5
android·java·ios·微信小程序·小程序
空白格972 小时前
组件化攻略
android
岸芷漫步2 小时前
android框架层弹出对话框的分析
android
蛋仔聊测试2 小时前
Playwright 中route 方法模拟测试数据(Mocking)详解
前端·python·测试