17-3 react native Android打包
想要打包Android應用,必須要有一個簽名。
其實這一節的內容已經和react native無關了,都是關於Android打包的知識。
首先,我們在專案的根目錄下進入android/app目錄中,然後執行這個生成簽名的命令。
keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
然後設定 gradle 變數
開啟gradle.properties檔案,新增簽名檔案,包括名字、別名、密碼等等
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=123456
MYAPP_RELEASE_KEY_PASSWORD=123456
最後,把簽名配置加入到專案的 gradle 配置中,
開啟android/app/build.gradle檔案,在singingConfigs裡面新增一個release。
android {
...
defaultConfig { ... }
signingConfigs {
...
release {
if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
}
// 在buildTypes裡面的release中將signingConfigs.debug修改成release
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
接下來,我們設定針對不同的 CPU 架構生成 APK 以減小 APK 檔案的大小
enableSeparateBuildPerCPUArchitecture=true
接下來,我們就可以進行打包,react native官方教程是直接使用gradle命令打包的
cd android && ./gradlew assembleRelease
如果是在window系統的cmd命令列下執行需要去掉
./
其實也可以使用一個指令碼工具進行打包,它可以幫助我們用一個命令打包並且上傳到各個測試平臺和app store。
要注意的是這個命令是用shell指令碼寫的,如果想要在window系統上執行,推薦大家安裝git bash。
首先安裝依賴
yarn add react-native-upload --dev
再執行生成配置檔案
npx upload-init
然後可以執行打包命令
# 單獨打包android
npx upload-build --no-ios
window系統下需要在git bash命令列下執行,如果有安裝的話,在vscode裡面可以選擇使用bash
打包的apk名字解釋:
arm64-v8a: 第8代、64位ARM處理器,很少裝置,三星 Galaxy S6是其中之一。
armeabiv-v7a: 第7代及以上的 ARM 處理器。2011年以後的生產的大部分Android裝置都使用它.
x86: 平板、模擬器用得比較多。
x86_64: 64位的平板。
一般情況使用armeabiv-v7a包就可以執行在大多數的手機上了。
打包完成之後,我們的應用一般還需要給測試人員進行測試,或者給公司內部人員使用,這種情況下我們可以將應用上傳到測試市場。
這裡,我們使用蒲公英,蒲公英是一個應用測試市場,只需將需要測試的應用上傳至蒲公英,生成二維碼,使用者就可以在手機上透過掃描二維碼,進行安裝了。
upload.json
"pgy": {
// 上傳憑證,訪問連結 ,複製Api Key
"pgy_api_key": "蒲公英key",
"pgy_install_type": 2,
"pgy_install_password": "123456",
"ios_export_plist": "./ios-export/ad-hoc.plist"
}
現在我們執行命令
# 預設上傳所有生成的android apk檔案,apk指定上傳的apk的名字正則
npx upload-pgy --apk=v7a --no-ios
# 先忽略iOS端的打包,因為我們還沒有配置iOS端的
當然也可以在scripts中新增一個命令
"build": "export ENVFILE=.env.production && npx upload-pgy --apk=v7a --no-ios"
在window系統上可以在git bash上執行
"build": "set ENVFILE=.env.production && npx upload-pgy --apk=v7a --no-ios"
完成,這樣以後需要釋出到測試市場上,一個命令就可以了。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2157/viewspace-2825621/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- React Native 打包apk的那些坑React NativeAPK
- 從Android到React Native開發(四、打包流程解析和釋出AndroidReact Native
- 從Android到React Native開發(四、打包流程解析和釋出為Maven庫)AndroidReact NativeMaven
- React Native Android 啟動異常React NativeAndroid
- React Native Android環境搭建(Mac)React NativeAndroidMac
- react-native android狀態列ReactAndroid
- React Native 修改Android工程目錄React NativeAndroid
- React Native開發中自動打包指令碼React Native指令碼
- React Native釋出APP之打包iOS應用React NativeAPPiOS
- React Native專案自動化打包釋出React Native
- 探索 react-native run-ios(android)ReactiOSAndroid
- React Native Android學習筆記 - 2015React NativeAndroid筆記
- React Native與Android通訊互動React NativeAndroid
- ? React-Native 官方示例演示 ( ios & android)ReactiOSAndroid
- [React Native]react-native-scrollabReact Native
- React Native Android混合開發實戰教程React NativeAndroid
- [譯] React Native 與 iOS 和 Android 通訊React NativeiOSAndroid
- React Native填坑之旅--開啟TurboModule(Android)React NativeAndroid
- React Native Icon方案:react-native-svgReact NativeSVG
- React Native Modal元件 Android覆蓋狀態列React Native元件Android
- React Native Android 原始碼分析之前期準備React NativeAndroid原始碼
- react-native Android使用阿里icon font圖示ReactAndroid阿里
- react native之android多包共存解決方案React NativeAndroid
- react native 和原生平臺 android的互動React NativeAndroid
- React Native填坑之旅--使用原生檢視AndroidReact NativeAndroid
- React Native轉web方案:react-native-webReact NativeWeb
- React Native 使用 react-native-webview 渲染 HTMLReact NativeWebViewHTML
- 重新認識React Native和Android的通訊原理React NativeAndroid
- Android整合React Native啟動白屏問題優化AndroidReact Native優化
- React Native Android 原始碼分析之啟動過程React NativeAndroid原始碼
- react-native&android 之開發問題篇一ReactAndroid
- react-native配置react-native-image-crop-pickerReact
- React Native選擇器元件-react-native-slidepickerReact Native元件IDE
- react-nativeReact
- React Native 上手React Native
- 《React Native高效開發》之create-react-native-appReact NativeAPP
- React Native在Android當中實踐(一)——背景介紹React NativeAndroid
- React Native在Android當中實踐(四)——程式碼整合React NativeAndroid