当前位置:首页 > React

如何运行react native

2026-02-26 14:31:04React

运行 React Native 项目的方法

环境准备
确保已安装 Node.js(建议版本 16 或更高)、Yarn 或 npm。需配置 Android Studio(用于 Android 开发)或 Xcode(用于 iOS 开发)。React Native 官方推荐使用 Expo 或 React Native CLI 进行开发。

通过 React Native CLI 运行
安装 React Native CLI 全局工具:

npm install -g react-native-cli

创建新项目:

npx react-native init ProjectName

进入项目目录并启动 Metro 打包工具:

cd ProjectName && npx react-native start

另开终端窗口运行应用:

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

通过 Expo 运行
安装 Expo CLI:

npm install -g expo-cli

创建项目:

expo init ProjectName

启动开发服务器:

cd ProjectName && expo start

通过 Expo Go 应用(手机扫描终端显示的二维码)或模拟器运行项目。

调试与热重载

  • 在模拟器中摇动设备(或按快捷键 Cmd+D(iOS)/ Ctrl+M(Android))打开开发者菜单。
  • 启用 Hot ReloadingFast Refresh 实现代码修改后实时更新。

常见问题解决

  • Android 设备连接问题:确保 USB 调试已开启,或通过 adb devices 检查设备识别。
  • iOS 模拟器问题:确保 Xcode 命令行工具已安装(xcode-select --install)。
  • 依赖冲突:删除 node_modulespackage-lock.json 后重新 npm install

注意事项

如何运行react native

  • 首次运行 Android 项目需确保模拟器已启动或设备已连接。
  • iOS 项目需在 macOS 系统上运行,且需 Xcode 签名配置。
  • 定期更新 React Native 版本以避免兼容性问题。

标签: reactnative
分享给朋友:

相关文章

react如何清理

react如何清理

清理 React 项目的方法 清理未使用的依赖项 运行 npm prune 或 yarn install --production 可以移除 node_modules 中未在 package.json…

typescript react 如何

typescript react 如何

TypeScript 与 React 结合使用的方法 在 React 项目中使用 TypeScript 可以提升代码的可维护性和类型安全性。以下是一些关键步骤和最佳实践: 安装 TypeScript…

如何清洁react

如何清洁react

清洁 React 项目的方法 删除未使用的依赖项 运行 npm ls 或 yarn list 检查已安装的依赖项,使用 npm uninstall <package> 或 yarn rem…

react如何减少setState

react如何减少setState

减少 React 中 setState 调用的方法 合并多次状态更新 使用函数式更新方式合并多次 setState 调用。React 会将多次状态更新批量处理,避免不必要的重新渲染。 // 非函…

vscode如何配置react

vscode如何配置react

配置 VSCode 进行 React 开发 安装必要插件 ES7+ React/Redux/React-Native snippets:提供 React 代码片段快速生成功能。 Prettier -…

react 如何修改state

react 如何修改state

修改 state 的基础方法 在 React 中,state 的修改必须通过 setState 方法(类组件)或 state 更新函数(函数组件)。直接修改 state 会导致组件不会重新渲染,且可能…