How does react-native implement automatic packaging? React-native automatic packaging method

The content of this article is about how to implement automatic packaging in react-native? The react-native automatic packaging method has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Have you also imagined that after writing the code, you don’t need to open xcode and android studio, but just execute a shell script to package both android and ios? And it will automatically be uploaded to Dandelion and App Store for you, and then the product will be automatically downloaded for testing. And you~~~ went directly to drink coffee.

Note: This article only describes how to use automatic script processing, so it is assumed that readers can package manually normally. If there are more complicated details, another chapter will be required.

Preparation materials

A macos host monitor, such as: mac-mini

Automatic build tools, such as: gitlab-runner, travis-ci, jenkins

Apple Developer Certification

The macos host needs to be used as the node of the build tool, and the following software or operations need to be installed:

git

xcode 9.4

xcode -> Settings-> accounts -> Add app_id used for Apple authentication or personal authentication

android studio

android sdk

java jdk 8

Note: If you don’t want to build a platform and just want to be simple, then you can integrate the following codes into one shell script and then execute it on your computer.

Packaging android

cd android
rm -rf build/ app/build/
./gradlew assembleRelease

The final apk file is at: android/app/build/outputs/apk/app-release.apk

Packaging ios

Build the basic package app first

cd ios
# 必须先创建目录
mkdir -p build
rm -rf build/archive.xcarchive build/ipa-*

# 获取目录名
project_list=`ls | grep .xcodeproj`
project_name=${project_list%%.*}

# 打包出app
# 这和你点击 xcode -> Product -> Archive 是一样的效果的。
xcodebuild clean
xcodebuild archive \
  -project ./${project_name}.xcodeproj \
  -scheme ${project_name} \
  -configuration Release \
  -archivePath ./build/archive.xcarchive

Then we need to export the app to ipa format so that it can be uploaded to the App Store or test platform such as: Dandelion, fir.im

To transfer to the App Store, you need to export the official ipa package, and to transfer to Dandelion, you need to use the test ipa package (ad-hoc), so you need to execute it twice

cd ios

# 正式ipa包
xcodebuild -exportArchive \
    -archivePath ./build/archive.xcarchive \
    -exportPath ./build/ipa-app-store \
    -exportOptionsPlist ./exportOptions/app-store.plist \
    -allowProvisioningUpdates
    
# 测试ipa包
xcodebuild -exportArchive \
    -archivePath ./build/archive.xcarchive \
    -exportPath ./build/ipa-ad-hoc \
    -exportOptionsPlist ./exportOptions/ad-hoc.plist \
    -allowProvisioningUpdates

The above compilation will definitely fail because you are missing two files app-store.plist and ad-hoc.plist. You can actually find this yourself, that is, in the folder that is packaged and Exported in xcode, there will be an ExportOptions.plist file

According to whether you choose App Store or Ad Hoc when exporting, copy them into the project exportOptions/app-store.plist andexportOptions/ad-hoc.plist

Upload Dandelion

The Dandelion used by the author, fir readers can find it themselves

PGY_API_KEY=你的api_key
PGY_HOST=https://www.pgyer.com/apiv2/app/upload

# ios
IPA=`ls ./ios/build/ipa-ad-hoc/*.ipa`
curl \ 
    --form "file=@$IPA" \
    --form "_api_key=$PGY_API_KEY" \
    $PGY_HOST
    
# android
curl \ 
    --form "file=@./android/app/build/outputs/apk/app-release.apk" \
    --form "_api_key=$PGY_API_KEY" \
    $PGY_HOST

Upload to AppStore

In fact, it is uploaded to appstoreconnect.apple.com first, which is the same as when you click Upload To App Store in xcode

Verify first whether it can be uploaded

APP_STORE_ACCOUNT=证书创建者账号
APP_STORE_PASSWORD=密码
IPA=`ls ./ios/build/ipa-app-store/*.ipa`

/Applications/Xcode.app/Contents/Applications/Application\ Loader.app/Contents/Frameworks/ITunesSoftwareService.framework/Versions/A/Support/altool \
    --validate-app \
    --file "$IPA" \
    --type ios \
    --username $APP_STORE_ACCOUNT \
    --password $APP_STORE_PASSWORD

You can only upload if the verification is successful, otherwise the upload will fail. No need to waste time

APP_STORE_ACCOUNT=证书创建者账号
APP_STORE_PASSWORD=密码
IPA=`ls ./ios/build/ipa-app-store/*.ipa`

# xcode临时生成的目录，不删除可能导致上传到appStore时失败
rm -rf ~/.itmstransporter/ ~/.old_itmstransporter/

# 开始上传
/Applications/Xcode.app/Contents/Applications/Application\ Loader.app/Contents/Frameworks/ITunesSoftwareService.framework/Versions/A/Support/altool \
    --upload-app \
    --file "$IPA" \
    --type ios \
    --username $APP_STORE_ACCOUNT \
    --password $APP_STORE_PASSWORD

Upload android

From the author's research, only Xiaomi application upload is provided Interface, other application platforms must be uploaded manually.

Notes:

1. A certificate needs to be generated on each node machine. You need to generate it manually, or use xcode to automatically generate it for you. If you don't do this step, you can't package ios
2. For the first few times of packaging, mac will prompt you to enter the password. You need to enter it in time, and be sure to click the button to always allow
3. If you use gitlab-runner, then in. Using alias altool=xx in gitlab-ci.yml will be invalid, that is, altool cannot be recognized. I don’t know why.
4. You must use macos system for ios packaging. Trying to use linux will not be worth the gain. You can use linux for android packaging, but it's also very troublesome, so why not do it with ios?
5. If macos is used as an automatically built sub-node, remember to make a startup script start.sh and add the script to the user-managed startup items. This sh file needs to be right-clicked to open the display introduction, and then set the opening method to terminal

## Recommended related articles:

Analysis of meta information meta tag attributes in HTML (with code)

About Gao Display of the basic controls of the German map WEB version

The above is the detailed content of How does react-native implement automatic packaging? React-native automatic packaging method. For more information, please follow other related articles on the PHP Chinese website!