1、技术环境搭建

Android SDK
1. 通过comdline-tools 管理SDK
2. 配置环境变量
3. 安装需要的SDK
常用命令行
1. 列举所有组件：sdkmanager --list
2. 下载指定版本：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端多环境自动打包相关推荐

react native Android端保持APP后台运行--封装 Headless JS
react native Android端保持APP后台运行--封装 Headless JS 前些日子在做后台下载时踩了后台运行这个大坑,RN官网文档上面在安卓上提供了Headless JS方法,iO ...
Android之Windows下搭建React Native Android开发环境（差不多搞了一天）
Android之Windows下搭建React Native Android开发环境穷逼买不起mac,但是他们都说React Native Android只能在mac下面 ...
React Native 三端同构实战
WeiboGoogle+用电子邮件发送本页面 0 React Native 三端(Web.iOS.Android)同构是指在不改动原 React Native 的代码下,让其在浏览器中运行出和在 Re ...
React Native三端融合在沪江的应用实践
内容来源:2017年3月11日,沪江web前端开发工程师陈达孚在"中生代技术&iTechPlus年度大会(上海)"进行<基于react native三端融合的应用和实 ...
React Native Android 源码框架浅析（主流程及 Java 与 JS 双边通信）
[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景有了前面<React Native Android 从学车到 ...
React Native Android 应用内存使用探究
本文讲的是React Native Android 应用内存使用探究, 为什么我那台老旧的 Android 手机无法加载图片? 刚开始接触 React Native 应用时,我发现有个现象很奇怪,在 ...
React Native三端同构
React Native三端同构,即iOS.Android.Web共用一套代码,已知React Native已经支持iOS.Android,所以只需要做支持Web的工作就行了. 如何同构我们可以利用 ...
React Native Android入门实战及深入源码分析系列（1）——Hello world
转载需注明出处:http://blog.csdn.net/minimicall?viewmode=contents 从今天起,我要分析React Native for Android的源码. 本系列主 ...
React Native Android启动白屏的一种解决方案下
React Native Android启动白屏的一种解决方案下参考文章: (1)React Native Android启动白屏的一种解决方案下 (2)https://www.cnblogs.co ...

React Native Android端多环境自动打包

文章目录

1、技术环境搭建

2、配置Android构建参数。

3、编辑复制文件到指定位置的脚本

4、Jenkins创建工程

5、下载nginx，配置相关参数、HTTPS证书

6、写iOS下载配置文件plist

7、编写下载页面

9、将下载页面、文件下载路径配置到nginx的配置文件中

10、启动nginx

React Native Android端多环境自动打包相关推荐

最新文章

热门文章