React-narice安卓打包流程

**1. 生成签名密钥

在项目的 android/app 目录下生成签名密钥的步骤：

1. 打开终端或命令提示符：导航到您的 React Native 项目的 android/app 目录。

2. 运行以下命令生成密钥库文件：

keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
​

 

参数说明：

• -keystore：指定生成的密钥库文件名。

• -alias：为密钥指定别名。

• -keyalg：指定加密算法，这里使用 RSA。CSDN博客

• -keysize：指定密钥长度，通常为 2048。

• -validity：指定密钥的有效期（天），例如 10000 天。

将生成的 my-release-key.keystore 文件放入 android/app 目录中。博客园

效果展示 （内容自己输入自己记住）：

2. 配置签名信息

在 android/app/build.gradle 文件中，添加签名配置：博客园

android {
    ...
    signingConfigs {
        release {
            storeFile file("my-release-key.keystore")
            storePassword "your-store-password"
            keyAlias "my-key-alias"
            keyPassword "your-key-password"
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}

 

注意：将 storePassword 和 keyPassword 替换为您在生成密钥时设置的密码。

并且有了signingConfig signingConfigs.release就要注释掉原有的

3. 生成发布版本的 APK

在项目根目录下，运行以下命令：

cd android
./gradlew assembleRelease
注意：在windos里用： gradlew.bat assembleRelease命令

 

此命令将在 android/app/build/outputs/apk/release/ 目录下生成 app-release.apk 文件。

4. 将 APK 安装到手机

确保手机已开启 USB 调试模式，并连接到电脑。然后运行：

adb install android/app/build/outputs/apk/release/app-release.apk

把这个apk文件用qq发到手机 然后点击安装就行

成功后，您即可在手机上找到并运行该应用。

注意事项

• 签名密钥的保存： 请妥善保存生成的 my-release-key.keystore 文件和相关密码信息，后续应用更新需要使用相同的签名。博客园

• 测试发布版本： 在发布前，建议在多种设备上测试生成的 APK，以确保兼容性和稳定性。

按照上述步骤，您即可将 React Native 项目打包成 APK 并安装到手机上运行。

前端打包和上线流程对于动态数据和静态数据来说是相同的。区别在于：

• 数据来源： 静态数据是直接写在代码里的，动态数据则是通过接口获取。

• 代码逻辑： 静态数据通常直接作为变量导入或嵌入，而动态数据通过 API 请求获取和渲染。

---

一、打包和上线流程（动态数据和静态数据相同）

1. 安装依赖：

   npm install

   或

   yarn install

2. 配置环境变量：

   • 在项目根目录创建或修改 .env.production 文件：

     REACT_APP_API_URL=https://api.example.com

   • 在代码中使用环境变量：

     const apiUrl = process.env.REACT_APP_API_URL;
     fetch(`${apiUrl}/products`)
       .then((res) => res.json())
       .then((data) => console.log(data));

3. 打包：

   npm run build

   或

   yarn build

   • 打包后生成的静态文件在 build/ 文件夹中。

4. 部署到服务器：

   • 上传打包文件：将 build/ 文件夹中的所有文件上传到服务器。

   • 服务器配置：使用 Nginx、Apache 或其他 Web 服务器托管静态文件。

     • Nginx 示例配置：

       server {
           listen 80;
           server_name yourdomain.com;
           root /var/www/html/build;
           index index.html;
       ​
           location / {
               try_files $uri /index.html;
           }
       }

   • 重启服务器：

     sudo systemctl restart nginx

5. 访问前端项目： 打开浏览器，访问 http://yourdomain.com。

---

二、动态数据打包和上线注意事项：

1. 环境变量：

   • 开发环境：

     REACT_APP_API_URL=http://localhost:5000

   • 生产环境：

     REACT_APP_API_URL=https://api.yourdomain.com

   • 在代码中根据环境变量来请求：

     const apiUrl = process.env.REACT_APP_API_URL;
     fetch(`${apiUrl}/products`);

2. CORS（跨域）问题：

   • 如果前端和后端不在同一个域名下，可能会遇到跨域问题。

   • 解决方法：

     • 在后端添加 CORS 支持：

       const express = require('express');
       const cors = require('cors');
       const app = express();
       ​
       app.use(cors());
       app.get('/api/products', (req, res) => {
           res.json({ name: 'Apple', price: 10 });
       });
       ​
       app.listen(5000, () => console.log('Server running on port 5000'));

     • Nginx 反向代理：

       nginx复制编辑location /api/ {
           proxy_pass http://localhost:5000/;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto $scheme;
       }

3. 接口请求测试：

   • 本地测试： 确保在开发环境中能正常请求接口数据。

   • 线上测试： 上线后通过浏览器开发者工具检查接口请求是否成功。

4. 接口地址修改：

   • 打包前一定要修改 API 地址为生产环境地址，避免上线后依然请求本地数据。

---

三、总结：

• 打包上线流程一致：静态数据和动态数据的前端项目在打包和上线流程上没有区别。

• 配置环境变量：开发和生产环境要使用不同的 API 地址。

• 后端接口准备：上线前确认后端服务正常运行，且能通过生产环境访问。

• 跨域问题解决：生产环境中如果前后端分离，跨域配置一定要正确。

• 线上测试验证：上线后要逐一检查接口请求和数据展示，确认动态数据是否正常加载。