當前位置：首頁 > 运维知识 > Android >内容正文

Android

React Native Android端多环境自动打包

發布時間：2023/12/31 Android 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 React Native Android端多环境自动打包小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

1、技術環境搭建
2、配置Android構建參數。
3、編輯復制文件到指定位置的腳本
4、Jenkins創建工程
5、下載nginx，配置相關參數、HTTPS證書
6、寫iOS下載配置文件plist
7、編寫下載頁面
9、將下載頁面、文件下載路徑配置到nginx的配置文件中
10、啟動nginx

1、技術環境搭建

Android SDK
通過comdline-tools 管理SDK
配置環境變量
安裝需要的SDK

常用命令行

列舉所有組件：sdkmanager --list
下載指定版本：sdkmanager “platform-tools” “platforms;android-23” build-tools;30.0.3"
Gradle
JDK
Node

2、配置Android構建參數。

在build.gradle中配置環境

// 配置js入口文件 project.ext.react = [entryFile : "index.js",releaseEntryFile: "index.release.js", ]// 配置多環境構建參數 buildTypes {release {...signingConfig signingConfigs.releaseminifyEnabled enableProguardInReleaseBuildsproguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"}preRelease {...applicationIdSuffix ".test"signingConfig signingConfigs.releaseminifyEnabled enableProguardInReleaseBuildsmatchingFallbacks = ['preRelease', 'release', 'debug']proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"}debug {...signingConfig signingConfigs.releaseapplicationIdSuffix ".debug"}}

修改react.gradle中的打包命令

// 在jsBundle打包之前，根據環境變量配置對應的js文件入口 if(targetName.toLowerCase().equals("release")){entryFile= config.releaseEntryFile?: "index.js" } else {entryFile="index.js" }

3、編輯復制文件到指定位置的腳本

autoPackage.sh

#!/bin/sh# 預先定義對應的環境變量 envionmentVariables(){#安卓項目工程路徑android_project_path="D:\gerrit\workspace\Traffic\pmcloud-android-rn\android"# 安卓apk目錄路徑apk_dir_path="$android_project_path/app/build/outputs/apk"# apk 路徑apk_debug_path="$apk_dir_path/debug/app-debug.apk"apk_preRelease_path="$apk_dir_path/preRelease/app-preRelease.apk"apk_release_path="$apk_dir_path/release/app-release.apk"# 安裝文件最終存儲路徑output_path="D:\marui\download\files" }apkBuild(){# 刪除老的apkrm -rf $apk_debug_pathrm -rf $apk_preRelease_pathrm -rf $apk_release_pathcd "$android_project_path"pwdsleep 1# 執行安卓打包腳本echo " ----clear start----"./gradlew clearecho " ----build start----"./gradlew build# 檢查apk文件是否存在if [ -f "$apk_debug_path" ]; thenecho "----build success(debug)----"sleep 1elseecho "----build failed(debug)----"exit 1fiif [ -f "$apk_preRelease_path" ]; thenecho "----build success(preRelease)----"sleep 1elseecho "----build failed(preRelease)----"exit 1fiif [ -f "$apk_release_path" ]; thenecho "----build success(release)----"sleep 1elseecho "----build failed(release)----"exit 1fi }copyFiles(){echo "復制結果文件到下載目錄" robocopy "$apk_dir_path/debug" "$output_path" "app-debug.apk"robocopy "$apk_dir_path/preRelease" "$output_path" "app-preRelease.apk"robocopy "$apk_dir_path/release" "$output_path" "app-release.apk"echo "復制完成" # echo xcopy }envionmentVariables #apkBuild copyFiles

4、Jenkins創建工程

在公司的jenkins（https://ci.yonyou.com/）上創建項目。其中重要的是構建步驟的配置如下：

執行windows批處理命令：yarn

執行windows批處理命令：git reset --hard

Invoke Gradle script：Use Gradle Wrapper、Wrapper location（ ${workspace}/android/）、Tasks（build）

執行windows批處理命令：

cd D:\marui sh autoPackage.sh

5、下載nginx，配置相關參數、HTTPS證書

6、寫iOS下載配置文件plist

ios.plist

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict><key>items</key><array><dict><key>assets</key><array><dict><key>kind</key><string>software-package</string><key>url</key>// ios包的下載地址<string>https://ygccs.yonyoucloud.com/files/app-ios-release.ipa</string></dict></array><key>metadata</key><dict><key>bundle-identifier</key>// 項目id<string>com.yonyou.engineerCloud</string><key>bundle-version</key><string>3.3.0</string><key>kind</key><string>software</string><key>title</key><string>友工程</string></dict></dict></array> </dict> </plist>

7、編寫下載頁面

<!DOCTYPE html> <html lang="cn"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"><title>工程云</title><style>html, body {width:100%;height: 100%;margin: 0 auto;text-align: center;background-color: #ffffff;cursor: pointer;-webkit-tap-highlight-color: transparent !important;}* {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.centent {max-width: 600px;width: 80%;height: 100%;margin: 20px auto;border-radius: 6px;display: flex;align-items: center;flex-direction: column;padding: 60px 0 20px 0;}.down-btn {max-width: 300px;width: 80%;background-color: #E6E6FA;padding: 10px 0 10px 0;border-radius: 6px;font-size: 16px;margin-top: 20px;}</style> </head> <body><div class = "centent"><h2>友工程app下載</h2><div class="down-btn" onclick="downClick(1);">Android 開發包</div><div class="down-btn" onclick="downClick(2);">Android 測試包</div><div class="down-btn" onclick="downClick(3);">Android 正式包</div><br/><div class="down-btn" onclick="downClick(4);">iOS 測試包</div><div class="down-btn" onclick="downClick(6);">iOS 正式包</div><br/><div class="down-btn" onclick="downClick(5);">數字體驗館Android包</div></div><script>window.onerror = function(msg,url,line,col,error){//alert("下載包不存在")}function downClick(type){let ua = navigator.userAgent.toLowerCase();let isWeixin = ua.indexOf('micromessenger') !== -1;if (isWeixin) {alert("請在瀏覽器打開下載");return;}switch(type){case 1:top.location.href="https://ygccs.yonyoucloud.com/files/app-debug.apk";break;case 2:top.location.href="https://ygccs.yonyoucloud.com/files/app-preRelease.apk";break;case 3:top.location.href="https://ygccs.yonyoucloud.com/files/app-release.apk";break;case 4:top.location.href="itms-services://?action=download-manifest&url=https://ygccs.yonyoucloud.com/ios-test.plist";break;case 6:top.location.href="itms-services://?action=download-manifest&url=https://ygccs.yonyoucloud.com/ios.plist";break;case 5:top.location.href="https://ygccs.yonyoucloud.com/files/app-exhibit.apk";break;}}</script> </body> </html>

9、將下載頁面、文件下載路徑配置到nginx的配置文件中

10、啟動nginx

總結

以上是生活随笔為你收集整理的React Native Android端多环境自动打包的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：植物大战僵尸2app攻略
下一篇： android app自动更新界面_An