React-narice安卓打包流程

**1. 生成签名密钥

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

打开终端或命令提示符：导航到您的 React Native 项目的 android/app 目录。
运行以下命令生成密钥库文件：

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 请求获取和渲染。

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

安装依赖：
```
npm install
```
或
```
yarn install
```

配置环境变量：

在项目根目录创建或修改 .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));

打包：
```
npm run build
```
或
```
yarn build
```
- 打包后生成的静态文件在 build/ 文件夹中。
部署到服务器：
- 上传打包文件：将 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
```
访问前端项目： 打开浏览器，访问 http://yourdomain.com。

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

环境变量：

开发环境：
```
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`);

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;
}