win7下react-native安卓打包踩坑

標籤：ror   put   orm   res   util   離線   sse   com   script   

都說工具使我們使用更加方便，然而最近研究React-native打包還有webpack這些工具，真是一把心酸一把淚。感覺這些開發工具對window系統十分不友好，外國佬都是都在用mac系統的土豪。

言歸正傳，今天寫下這個打包流程，目的是希望可以協助那些和我一同奮鬥在window系統的童鞋。

我這裡會先介紹完整流程，和一些可能會遇到的問題及解決方案

 

一、完整打包流程
（1）開啟packager包
在cmd的程式根目錄下/react-native start


（2）在工程目錄裡 執行 mkdir Android\app\src\main\assets 這目錄是為了儲存稍後的離線包


（3）產生密匙
在cmd的程式根目錄下keytool -genkey -v -keystore intelligentlifeandroid.keystore -alias intelligentlifeandroidalias -keyalg RSA -keysize 2048 -validity 10000
上述intelligentlifeandroid.keystore以及intelligentlifeandroidalias 都是可修改的


（4）設定gradle變數 將（3）申請到的keystore檔案放到android\app目錄下 
編輯 \ android \gradle.properties，添加如下的代碼（注意：請把其中的** 替代為替換的keystore密碼）

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****


（5）添加簽名到應用的gradle設定檔 
編輯你工程目錄下的android/app/build.gradle

...
android {
    ...
    defaultConfig { ... }
    拷貝：signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            拷貝：signingConfig signingConfigs.release
        }
    }
}

（6）cd 到 \android 目錄下 使用gradle命令打簽名包：gradlew assembleRelease 
（打包前應該確保react-native start已開啟）
打包成功後會在 android\app\build\outputs\apk內 找到app-release.apk 就是簽名apk。 

（7）如果想重新打包，在\android 目錄下使用命令：gradlew clean（清除檔案）
（確保react-native start已開啟）
接著在執行命令6

（8）執行一次後再次打包只需直接執行（6）或（7）

 

二、打包過程可能會出現的一些問題：

1.查看gradle環境
C:\Users\使用者\.gradle\wrapper\dists的gradle2.XX的壓縮檔完整與否

2.報：Java.util.zip.ZipException: error in opening zip file
編譯環境與產生環境的JDK版本不一樣

3.報：‘:app:bundleReleaseJsAndAssets‘
在\android\app\react.gradle檔案
修改前：
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
                    commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "${devEnabled}",
                            "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir
                } else {
                    commandLine "react-native", "bundle", "--platform", "android", "--dev", "${devEnabled}",
                            "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir
                }


修改後：
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
                    commandLine "cmd", "/c", "node", "node_modules/react-native/local-cli/cli.js", "bundle", "--platform", "android", "--dev", "${devEnabled}",
                            "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir
                } else {
                    commandLine "node", "node_modules/react-native/local-cli/cli.js", "bundle", "--platform", "android", "--dev", "${devEnabled}",
                            "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir
                }

 

win7下react-native安卓打包踩坑