React Native 初始化项目和模拟器运行

中文官方文档:https://reactnative.cn/docs/environment-setup

英文官方文档:https://reactnative.dev/docs/getting-started-without-a-framework#step-1-creating-a-new-application

创建新项目

1、初始化

bash 复制代码
# 如果你之前全局安装过旧的react-native-cli命令行工具,请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突
npm uninstall -g react-native-cli @react-native-community/cli

# 初始化
npx @react-native-community/cli init demo

# [可选参数] 指定版本或项目模板
npx @react-native-community/cli init demo --version X.XX.X

npx命令安装了npm就可以用

2、安装js依赖

进入demo

bash 复制代码
npm i
运行

1、用Android studiod打开demo的android文件夹并build, 经过漫长...漫长...漫长的时间:

2、安装手机模拟器

安装好后,点三角形按钮:

检查时候有设备的命令:

bash 复制代码
adb devices

3、运行

bash 复制代码
npm run android

运行成功:

相关推荐
全栈前端老曹2 小时前
【ReactNative】核心组件与 JSX 语法
前端·javascript·react native·react.js·跨平台·jsx·移动端开发
光影少年4 小时前
RN vs Flutter vs Expo 选型
前端·flutter·react native
Swift社区1 天前
RN 项目中“页面存在 ≠ 页面可见”会导致哪些隐藏 Bug?
react native·bug·react
赵财猫._.2 天前
React Native鸿蒙开发实战(十):鸿蒙NEXT深度适配与未来展望
react native·react.js·harmonyos
2401_860319522 天前
在React Native鸿蒙跨平台开发采用分类网格布局,通过paramRow和paramLabel/paramValue的组合展示关键配置信息
react native·react.js·harmonyos
2301_796512522 天前
使用如Redux、MobX或React Context等状态管理库来管理状态,React Native鸿蒙跨平台开发来实战
react native·react.js·harmonyos
洞窝技术2 天前
自建 React Native 热修复,让线上事故 30 秒“归零”
react native
2401_860494702 天前
在React Native中实现鸿蒙跨平台开发中开发一个运动类型管理系统,使用React Navigation设置应用的导航结构,创建一个堆栈导航器
react native·react.js·harmonyos
2301_796512522 天前
使用状态管理、持久化存储或者利用现有的库来辅助React Native鸿蒙跨平台开发开发一个允许用户撤销删除的操作
javascript·react native·react.js
2301_796512522 天前
React Native鸿蒙跨平台开发包含输入收入金额、选择收入类别、记录备注和日期等功能,实战react-native-paper组件
javascript·react native·react.js