「React Native」熱更新之Android配置

1. 搭建步驟:

1.在項目目錄下,執(zhí)行react-native --save react-native-code-push,添加react-native-code-push庫
2.輸入react-native link react-native-code-push,會在android(ios可以stash掉)目錄下,自動添加引入react-native-code-push庫的代碼,首次執(zhí)行會提示是否有deployment key,直接enter的話,表示暫時不設(shè)置key,為了測試,可以先填寫debug的key。
3.修改node_modules/react-native-code-push/android/app下build.gradle的buildToolsVersion為 '25.0.0'(因為原生模塊采用的buildToolsVersion是'25.0.0'),需要刪除gradle自動生成的compile('react-native-code-push'),在AndroidManifest.xml的tools:overrideLibrary添加com.microsoft.codepush.react
4.在app/build.gradle中添加

apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

5.可選操作:
(1)將deployment key(production和debug下兩種)存在gradle.properties中。
(2)在app/build.gradle中添加

android {
    ...
    buildTypes {
        debug {
            ...
            // Note: CodePush updates should not be tested in Debug mode as they are overriden by the RN packager. However, because CodePush checks for updates in all modes, we must supply a key.
            buildConfigField "String", "CODEPUSH_KEY", '""'
            ...
        }

        releaseStaging {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_STAGING_KEY>"'
            ...
        }

        release {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
            ...
        }
  }
    ...
}

6.調(diào)用codepush不需要activity承載時(一般是純rn),直接調(diào)用codepush服務(wù)時,可在application處添加:

...
//Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method in order to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }

        @Override
        protected List<ReactPackage> getPackages() {
            // 3. Instantiate an instance of the CodePush runtime and add it to the list of
            // existing packages, specifying the right deployment key. If you don't already // have it, you can run "code-push deployment ls <appName> -k" to retrieve your key.
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
            );
        }
    };
}
 

7.混合(原生和rn)的項目,對MyReactActivity.java需要配置以下信息:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MyReactActivity extends Activity {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        mReactInstanceManager = ReactInstanceManager.builder()
                // ...
                // Add CodePush package
                .addPackage(new CodePush("deployment-key-here", getApplicationContext(), BuildConfig.DEBUG))
                // Get the JS Bundle File via CodePush
                .setJSBundleFile(CodePush.getJSBundleFile())
                // ...

                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

    ...
}

2.push android app中的bundle到appcenter:

  1. npm install -g appcenter-cli
  2. appcenter login 登錄(輸入賬號密碼后,彈出一個網(wǎng)站,復(fù)制其中的code)到終端命令行
  3. (打包bundle上傳到appcenter,會讀取app版本作為js bundle的版本,若不跟參數(shù),默認(rèn)發(fā)布到stage)
    appcenter codepush release -a <ownerName>/<appName> -c <updateContentsPath> -t <targetBinaryVersion> -d <deploymentName>
    [-t|--target-binary-version <version>]
    [-с|--update-contents-path <updateContentsPath>]
    [-r|--rollout <rolloutPercentage>]
    [--no-duplicate-release-error]
    [-k|--private-key-path <privateKeyPath>]
    [-m|--mandatory]
    [-x|--disabled]
    [--description <description>]
    [-d|--deployment-name <deploymentName>]
    [-a|--app <ownerName>/<appName>]
    [--disable-telemetry]
    [-v|--version]

建議添加描述信息, --description "版本提示信息",方便在網(wǎng)站后臺查看管理每個版本。因為有時候?qū)ν籥pp版本有多次熱更新,一多時間一久就會不太清楚每次熱更新修復(fù)或者新增對功能是什么了。

  1. appcenter logout

3.接入迭代,實際感受的優(yōu)缺點。

1.若只有js代碼的改動,用熱更新快速修復(fù)bug,用戶幾乎可以做到無縫升級,非常方便。
2.使用起來對版本的控制機(jī)制挺滿意的,首次通過命令設(shè)置目標(biāo)版本,在后臺可以更改目標(biāo)版本的范圍,以及關(guān)閉熱更新。
3.缺點是暫時沒有用增量更新的方式,通過抓包發(fā)現(xiàn),每次用戶升級后,都是重新下載了最新的js bundle。
參考資料:https://docs.microsoft.com/zh-cn/appcenter/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容