react如何打包成app

使用 React Native 打包原生应用

React Native 允许将 React 代码编译为原生移动应用（iOS/Android）。

安装 React Native CLI：

npx react-native init MyApp

进入项目目录并启动开发服务器：

cd MyApp
npx react-native start

在另一个终端运行应用（Android/iOS）：

npx react-native run-android  # 需提前配置 Android Studio
npx react-native run-ios      # 需 Xcode 环境

生成发布 APK（Android）：

cd android && ./gradlew assembleRelease

生成的 APK 位于 android/app/build/outputs/apk/release/。

生成 IPA（iOS）：
通过 Xcode 选择 Product > Archive，导出 IPA 文件。

使用 Capacitor 打包混合应用

Capacitor 可将 React Web 应用转换为 iOS/Android 应用，适合已有 React 网页项目。

安装 Capacitor：

npm install @capacitor/core @capacitor/cli
npx cap init

添加平台并同步代码：

npx cap add android
npx cap add ios
npx cap sync

构建 React 项目后更新平台代码：

npm run build
npx cap copy

打开 Android Studio 或 Xcode 进行最终打包：

npx cap open android
npx cap open ios

使用 PWA 技术（渐进式 Web 应用）

通过 service-worker 和 manifest.json 将 React 应用转换为可安装的 PWA。

创建 manifest.json 并配置：

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": ".",
  "display": "standalone"
}

注册 Service Worker（通常通过 workbox-webpack-plugin 自动生成）。

部署到 HTTPS 服务器后，用户可通过浏览器“添加到主屏幕”安装。

注意事项

• 原生功能依赖：访问摄像头、GPS 等需配置对应平台权限。
• 性能优化：移除未使用的库，启用 Hermes 引擎（React Native）。
• 签名证书：Android 需 keystore，iOS 需开发者账号。

根据需求选择方案：React Native 适合高性能原生体验，Capacitor/PWA 适合快速迁移现有网页项目。