react如何打包成app
使用 React Native 打包成移动应用
React Native 是 Facebook 推出的框架，可以直接将 React 代码编译为原生移动应用（iOS/Android）。
安装 React Native CLI：
npm install -g react-native-cli创建新项目：
npx react-native init MyApp进入项目目录并运行：
cd MyApp
npx react-native run-android # 安卓
npx react-native run-ios # iOS打包安卓 APK：
在 android/app/build.gradle 中配置签名，然后运行：
cd android && ./gradlew assembleRelease打包 iOS IPA：
通过 Xcode 打开 ios/MyApp.xcworkspace，选择 Product > Archive 进行打包。
使用 Capacitor 或 Cordova 打包混合应用
Capacitor 和 Cordova 可以将 React 应用封装为混合移动应用。
安装 Capacitor：
npm install @capacitor/core @capacitor/cli
npx cap init添加平台：
npx cap add android
npx cap add ios构建并同步：
npm run build
npx cap sync打开 Android Studio 或 Xcode 进行打包：
npx cap open android
npx cap open ios使用 PWA（渐进式 Web 应用）
通过 PWA 技术，React 应用可以接近原生应用的体验。
在 public/manifest.json 配置 PWA 元数据：
{
"name": "My App",
"short_name": "App",
"start_url": ".",
"display": "standalone"
}注册 Service Worker（通常由 create-react-app 自动生成）：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}部署到 HTTPS 服务器后，用户可通过浏览器安装到主屏幕。
使用 Electron 打包桌面应用
Electron 可以将 React 应用打包为跨平台桌面应用（Windows/macOS/Linux）。
安装 Electron：
npm install electron --save-dev创建 main.js 作为入口文件：
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({ width: 800, height: 600 });
win.loadFile('build/index.html');
}
app.whenReady().then(createWindow);修改 package.json：
{
"main": "main.js",
"scripts": {
"start": "electron ."
}
}打包：
使用 electron-builder：
npm install electron-builder --save-dev
npx electron-builder注意事项
- React Native 适合需要原生性能的应用，但学习曲线较陡。
- Capacitor/Cordova 适合已有 Web 项目的快速封装。
- PWA 无需应用商店分发，但功能受限。
- Electron 仅适用于桌面端，打包体积较大。
