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 预览


相关推荐
pe7er3 小时前
window管理开发环境篇 - 持续更新
前端·后端
We་ct4 小时前
LeetCode 5. 最长回文子串:DP + 中心扩展
前端·javascript·算法·leetcode·typescript
陈随易8 小时前
有生之年系列,Nodejs进程管理pm2 v7.0发布
前端·后端·程序员
冰暮流星8 小时前
javascript之事件代理/事件委托
前端
陈随易9 小时前
AI时代,你还在坚持手搓文章吗
前端·后端·程序员
liang_jy10 小时前
Android SparseArray
android·源码
liang_jy10 小时前
Activity 启动流程扩展篇(一)—— startActivityInner 任务决策全解析
android·源码
NPE~11 小时前
[App逆向]脱壳实战
android·教程·逆向·android逆向·逆向分析
木易 士心12 小时前
别再只会用 drawCircle 了!一文搞懂 Android Canvas 底层机制
android
里欧跑得慢12 小时前
17. Flutter Hero动画实现:让界面过渡更加优雅
前端·css·flutter·web