美文网首页
「React Native」热更新之Android配置

「React Native」热更新之Android配置

作者: 七月流火_9405 | 来源:发表于2017-12-29 23:02 被阅读0次

1. 搭建步骤:

1.在项目目录下,执行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库的代码,首次执行会提示是否有deployment key,直接enter的话,表示暂时不设置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.调用codepush不需要activity承载时(一般是纯rn),直接调用codepush服务时,可在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 登录(输入账号密码后,弹出一个网站,复制其中的code)到终端命令行
  3. (打包bundle上传到appcenter,会读取app版本作为js bundle的版本,若不跟参数,默认发布到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 "版本提示信息",方便在网站后台查看管理每个版本。因为有时候对同一app版本有多次热更新,一多时间一久就会不太清楚每次热更新修复或者新增对功能是什么了。

  1. appcenter logout

3.接入迭代,实际感受的优缺点。

1.若只有js代码的改动,用热更新快速修复bug,用户几乎可以做到无缝升级,非常方便。
2.使用起来对版本的控制机制挺满意的,首次通过命令设置目标版本,在后台可以更改目标版本的范围,以及关闭热更新。
3.缺点是暂时没有用增量更新的方式,通过抓包发现,每次用户升级后,都是重新下载了最新的js bundle。
参考资料:https://docs.microsoft.com/zh-cn/appcenter/

相关文章

网友评论

      本文标题:「React Native」热更新之Android配置

      本文链接:https://www.haomeiwen.com/subject/aoiwgxtx.html