当前位置:首页 > React

如何启动react native

2026-02-11 22:32:02React

安装Node.js和npm

确保系统已安装Node.js(建议使用LTS版本),npm会随Node.js自动安装。可通过以下命令验证安装:

node -v
npm -v

安装React Native CLI

全局安装React Native命令行工具:

npm install -g react-native-cli

或使用npx(推荐,避免全局安装):

npx react-native init ProjectName

安装Android Studio或Xcode

  • Android开发:安装Android Studio,配置SDK和模拟器。
  • iOS开发:需Xcode(仅限macOS),通过App Store安装。

初始化项目

使用以下命令创建新项目(替换ProjectName):

npx react-native init ProjectName
cd ProjectName

启动开发服务器

在项目根目录运行:

npm start

如何启动react native

yarn start

运行应用

  • Android
    npx react-native run-android
  • iOS
    npx react-native run-ios

调试工具

  • 摇动设备或按快捷键(Android模拟器按Ctrl+M,iOS模拟器按Cmd+D)打开开发者菜单。
  • 使用Chrome开发者工具或Flipper进行高级调试。

常见问题

  • 端口冲突:确保8081端口未被占用,或通过--port参数指定其他端口。
  • 环境变量:若报错,检查ANDROID_HOME或Xcode路径是否正确配置。

以上步骤涵盖从环境配置到项目运行的完整流程。根据平台需求选择Android或iOS相关操作。

标签: reactnative
分享给朋友:

相关文章

react如何测试

react如何测试

React 测试方法 React 应用的测试通常涉及组件测试、集成测试和端到端测试。以下是常用的测试工具和方法: Jest Jest 是 Facebook 开发的 JavaScript 测试框架,适…

react实现vue

react实现vue

React 实现 Vue 功能 React 和 Vue 是两种不同的前端框架,但可以通过一些方法在 React 中实现 Vue 的特性。以下是几种常见 Vue 功能在 React 中的实现方式: 双…

react如何更新

react如何更新

更新 React 版本的方法 检查当前 React 版本 运行以下命令查看项目中安装的 React 版本: npm list react 更新 React 及相关依赖 通过 npm 或 yarn…

如何记忆react

如何记忆react

理解核心概念 React的核心概念包括组件、状态(state)、属性(props)、生命周期方法(类组件)和钩子(函数组件)。掌握这些基础概念是记忆React的关键。组件是React应用的构建块,分为…

react如何调试

react如何调试

调试 React 应用的方法 使用 React Developer Tools React Developer Tools 是 Chrome 和 Firefox 的浏览器扩展,可以检查组件树、状态和…

react 如何启动

react 如何启动

创建 React 项目 使用官方工具 create-react-app 快速初始化项目,需提前安装 Node.js(版本 ≥ 14.0.0)和 npm/yarn: npx create-react-…