当前位置:Gxlcms > html代码 > react-native如何实现自动打包?react-native自动打包的方法

react-native如何实现自动打包?react-native自动打包的方法

时间:2021-07-01 10:21:17 帮助过:59人阅读

本篇文章给大家带来的内容是关于react-native如何实现自动打包?react-native自动打包的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

你是否也在幻想写完代码后,无需打开xcode和android studio,只要执行一个shell脚本,就能把android和ios都打包出来?而且自动帮你传到蒲公英和App Store,接着产品自动去下载测试。而你~~~直接去喝咖啡了。

注意:本篇仅讲述如何用自动脚本处理,所以已经假设看官们已经能正常手动打包。若有更多繁枝细节,则需要另开篇幅。

准备材料

一台macos主机+显示器,比如:mac-mini

自动构建工具,比如:gitlab-runner、travis-ci、jenkins

苹果开发者认证

macos主机需作为构建工具的节点,并且需要安装如下的软件或操作:

git

xcode 9.4+

xcode -> 设置 -> accounts -> 添加苹果公司认证或者个人认证所用的app_id

android studio

android sdk

java jdk 8

注意:如果你不想搞构建平台,只想简简单单地,那么你可以把下面的那么多代码整合成一个shell脚本,然后在自己的电脑里执行。

打包android

  1. cd android
  2. rm -rf build/ app/build/
  3. ./gradlew assembleRelease

最后的apk文件在:android/app/build/outputs/apk/app-release.apk

打包ios

先构建基础包app

  1. cd ios
  2. # 必须先创建目录
  3. mkdir -p build
  4. rm -rf build/archive.xcarchive build/ipa-*
  5. # 获取目录名
  6. project_list=`ls | grep .xcodeproj`
  7. project_name=${project_list%%.*}
  8. # 打包出app
  9. # 这和你点击 xcode -> Product -> Archive 是一样的效果的。
  10. xcodebuild clean
  11. xcodebuild archive \
  12. -project ./${project_name}.xcodeproj \
  13. -scheme ${project_name} \
  14. -configuration Release \
  15. -archivePath ./build/archive.xcarchive

接着我们需要把app导出为ipa格式,这样才能上传到App Store或者测试平台比如:蒲公英 、 fir.im

传到App Store需要导出正式的ipa包,而传到蒲公英需要使用测试ipa包(ad-hoc),所以需要执行两遍

  1. cd ios
  2. # 正式ipa包
  3. xcodebuild -exportArchive \
  4. -archivePath ./build/archive.xcarchive \
  5. -exportPath ./build/ipa-app-store \
  6. -exportOptionsPlist ./exportOptions/app-store.plist \
  7. -allowProvisioningUpdates
  8. # 测试ipa包
  9. xcodebuild -exportArchive \
  10. -archivePath ./build/archive.xcarchive \
  11. -exportPath ./build/ipa-ad-hoc \
  12. -exportOptionsPlist ./exportOptions/ad-hoc.plist \
  13. -allowProvisioningUpdates

上面编译肯定是不通过的,因为你缺少两个文件app-store.plistad-hoc.plist。这个你自己其实能找到,那就是在xcode里打包并Export出来的文件夹里,都会有一个ExportOptions.plist文件

298157778-5b684528d544f_articlex.png
根据你在Export时选择的是App Store 还是 Ad Hoc,分别复制进项目exportOptions/app-store.plistexportOptions/ad-hoc.plist

上传蒲公英

笔者用的蒲公英,fir的看官自己去找

  1. PGY_API_KEY=你的api_key
  2. PGY_HOST=https://www.pgyer.com/apiv2/app/upload
  3. # ios
  4. IPA=`ls ./ios/build/ipa-ad-hoc/*.ipa`
  5. curl \
  6. --form "file=@$IPA" \
  7. --form "_api_key=$PGY_API_KEY" \
  8. $PGY_HOST
  9. # android
  10. curl \
  11. --form "file=@./android/app/build/outputs/apk/app-release.apk" \
  12. --form "_api_key=$PGY_API_KEY" \
  13. $PGY_HOST

上传AppStore

其实是先上传到 appstoreconnect.apple.com,和你在xcode里点击Upload To App Store是一样的

先验证是否可以上传

  1. APP_STORE_ACCOUNT=证书创建者账号
  2. APP_STORE_PASSWORD=密码
  3. IPA=`ls ./ios/build/ipa-app-store/*.ipa`
  4. /Applications/Xcode.app/Contents/Applications/Application\ Loader.app/Contents/Frameworks/ITunesSoftwareService.framework/Versions/A/Support/altool \
  5. --validate-app \
  6. --file "$IPA" \
  7. --type ios \
  8. --username $APP_STORE_ACCOUNT \
  9. --password $APP_STORE_PASSWORD

验证成功的话,你才能上传,否则上传会失败的,不用浪费时间

  1. APP_STORE_ACCOUNT=证书创建者账号
  2. APP_STORE_PASSWORD=密码
  3. IPA=`ls ./ios/build/ipa-app-store/*.ipa`
  4. # xcode临时生成的目录,不删除可能导致上传到appStore时失败
  5. rm -rf ~/.itmstransporter/ ~/.old_itmstransporter/
  6. # 开始上传
  7. /Applications/Xcode.app/Contents/Applications/Application\ Loader.app/Contents/Frameworks/ITunesSoftwareService.framework/Versions/A/Support/altool \
  8. --upload-app \
  9. --file "$IPA" \
  10. --type ios \
  11. --username $APP_STORE_ACCOUNT \
  12. --password $APP_STORE_PASSWORD

上传android

从笔者的研究来看,仅小米应用的上传有提供接口,其他应用平台都要手动上传。

注意事项:

1、每个节点机器上都需要生成一个certificate。你需要手动生成,或者利用xcode自动帮你生成。这一步不做无法打包ios
2、前面几次打包,mac会有输入密码的提示,需要及时输入,并务必点击按钮始终允许
3、如果用了gitlab-runner,那么在.gitlab-ci.yml中用 alias altool=xx将无效,即无法识别altool,不知为何.
4、ios打包一定要用macos系统,尝试用linux将得不偿失。android打包倒是可以用linux,但也麻烦的要死,所以为什么不和ios一起呢?
5、如果macos作为自动构建的子节点,那么记得做一个开机启动脚本start.sh,并把脚本加入用户管理的启动项。这个sh文件需要右键打开显示简介,接着把打开方式设置为终端才行

1495684574-5b69047a6e75b_articlex.png

2532800737-5b6904a9b2e7c_articlex.png

相关文章推荐:

HTML中元信息meta标记属性的分析(附代码)

关于高德地图WEB版基础控件的展示

以上就是react-native如何实现自动打包?react-native自动打包的方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行