如何将React开发的Web应用打包为APK用于移动端测试？

给你两个适合新手的方案，从易到难，都能实现「点击图标运行、效果和npm start一致」的需求：

方案一：PWA（渐进式Web应用）—— 最快上手，无需复杂工具 #

这个方案不用生成安装包，直接通过浏览器把应用添加到手机主屏幕，点击图标就能像原生APP一样运行，完全满足你让别人在你手机上试用的需求。

具体步骤： #

1. 检查并修改React项目的PWA配置

   • 如果你是用create-react-app创建的React项目，默认已经自带PWA支持，只需要改几个配置文件：
     • 打开项目根目录下的public/manifest.json，确保以下字段正确（可以直接替换成你的信息）：

       {
         "short_name": "你的应用短名",
         "name": "你的完整应用名称",
         "start_url": ".",
         "display": "standalone", // 关键！让应用全屏运行，和原生APP一样
         "theme_color": "#000000",
         "background_color": "#ffffff",
         "icons": [
           {
             "src": "logo192.png",
             "sizes": "192x192",
             "type": "image/png"
           },
           {
             "src": "logo512.png",
             "sizes": "512x512",
             "type": "image/png"
           }
         ]
       }
       

     - 把`public`目录下的`logo192.png`和`logo512.png`换成你自己的应用图标（尺寸对应就行，随便找个在线工具就能生成）。
     
     

2. 打包React项目

   • 打开项目根目录的终端，运行：

     npm run build
     

   • 跑完后会生成一个build文件夹，里面就是打包好的静态网页文件。

3. 用本地服务器托管打包后的文件

   • 要让手机能访问你的应用，得把build文件夹放到本地服务器上，而且你的手机和电脑必须连同一个WiFi：
     • 先装一个简单的本地服务器工具serve，终端运行：

       npm install -g serve
       

     • 然后在项目根目录运行：

       serve -s build
       

     • 终端会输出一个访问地址，比如http://192.168.1.100:3000（注意别用localhost，必须是电脑的局域网IP，手机才能访问）。

4. 手机添加应用到主屏幕

   • 打开手机浏览器，输入上面的IP地址，打开你的应用。
   • 浏览器会弹出「添加到主屏幕」的提示（不同浏览器位置不一样，比如Chrome在右上角菜单里），点击添加后，手机主屏幕就会出现一个和原生APP一样的图标，点击就能直接运行，效果和npm start完全一致。

方案二：Cordova —— 生成安卓APK安装包（可发给他人安装） #

如果你需要生成可以直接传给别人安装的安卓APK文件，就用这个方案，它能把你的静态网页打包成原生安卓安装包。

具体步骤： #

1. 安装Cordova

   • 确保你已经装了Node.js，然后终端运行：

     npm install -g cordova
     

2. 创建Cordova项目

   • 找一个空文件夹，终端运行：

     cordova create 你的项目名 com.your.appname "应用名称"
     

   • 进入项目目录：

     cd 你的项目名
     

3. 添加安卓平台

   • 运行：

     cordova platform add android
     

   • 如果提示缺少安卓开发环境（JDK、Android SDK），按照终端提示安装就行，或者运行cordova requirements检查依赖，跟着指引补全。

4. 替换Cordova的网页文件

   • 把之前React项目打包生成的build文件夹里的所有文件，复制到Cordova项目的www目录下，覆盖原来的所有文件。

5. 生成APK安装包

   • 终端运行：

     cordova build android
     

   • 成功后，APK文件会在platforms/android/app/build/outputs/apk/debug/app-debug.apk这个路径下。

6. 安装到手机

   • 把APK文件传到你的手机（用微信、QQ或者数据线都行），然后在手机上打开安装（需要开启「允许安装未知来源应用」的权限），安装完成后点击图标就能运行。

新手注意点 #

• PWA方案适合快速让别人在你手机上试用，不用装任何额外软件；Cordova适合生成安装包发给别人。
• 如果你的应用需要访问手机原生功能（比如摄像头、定位），Cordova可以通过插件实现，PWA也支持部分原生API，但不如Cordova全面。
• 用PWA的时候，一定要确保手机和电脑在同一个WiFi下，不然手机访问不到本地服务器。

内容的提问来源于stack exchange，提问作者Sarthak Garg