**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; }
-
-
-
接口請求測試：
-
本地測試： 確保在開發環境中能正常請求接口數據。
-
線上測試： 上線后通過瀏覽器開發者工具檢查接口請求是否成功。
-
-
接口地址修改：
-
打包前一定要修改 API 地址為生產環境地址，避免上線后依然請求本地數據。
-
三、總結：
-
打包上線流程一致：靜態數據和動態數據的前端項目在打包和上線流程上沒有區別。
-
配置環境變量：開發和生產環境要使用不同的 API 地址。
-
后端接口準備：上線前確認后端服務正常運行，且能通過生產環境訪問。
-
跨域問題解決：生產環境中如果前后端分離，跨域配置一定要正確。
-
線上測試驗證：上線后要逐一檢查接口請求和數據展示，確認動態數據是否正常加載。
?
 高頻詞匯背誦)
