React Native集成CodePush

CodePush is a cloud service that enables Cordova and React Native developers to deploy mobile app updates directly to their users’ devices. It works by acting as a central repository that developers can publish certain updates to (e.g. JS, HTML, CSS and image changes), and that apps can query for updates from (using our provided client SDKs). This allows you to have a more deterministic and direct engagement model with your end-users, while addressing bugs and/or adding small features that don’t require you to re-build a binary and/or re-distribute it through any public app stores.

支持平台

  • iOS (7+)
  • Android (4.1+)
  • Windows (UWP)

CodePush环境

1.安装CodePush CLI
npm install -g code-push-cli
2.创建CodePush帐号
输入下方命令后会跳转到网页,选择微软或者GitHub帐号注册,根据提示操作
code-push register
3.注册app
code-push app add MyApp
4.安装code-push模块
npm install --save react-native-code-push@latest

android配置CodePush

1.安装code-push插件
由于React Native v0.27之后已经集成了rnpm link,只需运行如下命令
react-native link react-native-code-push
2.配置部署环境key(deployment-key)
查看对应部署环境的key
code-push deployment ls YourAPP -k

并填写到MainApplication.java的deployment-key-here

...
// 1. 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 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  -k" to retrieve your key.
            return Arrays.asList(
                new MainReactPackage(),
                new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
            );
        }
    };
}

3.设置版本号
修改android版本号,修改android/app/build.gradle文件

android{
    defaultConfig{
        versionName "1.0.0"
    }
}

iOS配置CodePush

参考官方文档.

使用CodePush

1.基本使用
Wrap your root component with the codePush higher-order component

import codePush from "react-native-code-push";

class MyApp extends Component {
}

MyApp = codePush(MyApp);

2.配置更新
可以通过codePushOptions配置更新频率等,,

let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };

class MyApp extends Component {
}

MyApp = codePush(codePushOptions)(MyApp)

3.手动检测更新
调用codePush.sync,并配置相关参数

let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };

class MyApp extends Component {
    onButtonPress() {
        codePush.sync({
            updateDialog: true,
            installMode: codePush.InstallMode.IMMEDIATE
        });
    }

    render() {
        
            
                Check for updates
            
        
    }
}

MyApp = codePush(codePushOptions)(MyApp);

发布更新

code-push release-react发布到Staging开发环境
code-push promote发布到生产环境
1.基本命令(在对应工程目录运行)

code-push release-react  

code-push release-react MyApp ios
code-push release-react MyApp-Android android

2.附加选项
code-push release-react还能配置更新信息,是否强制更新,依赖版本等,,,

# Release a mandatory update with a changelog
code-push release-react MyApp ios -m --description "Modified the header color" // -m强制更新

# Release an update for an app that uses a non-standard entry file name, and also capture
# the sourcemap file generated by react-native bundle
code-push release-react MyApp ios --entryFile MyApp.js --sourcemapOutput ../maps/MyApp.map

# Release a dev Android build to just 1/4 of your end users
code-push release-react MyApp-Android android --rollout 25% --dev true

# Release an update that targets users running any 1.1.* binary, as opposed to
# limiting the update to exact version name in the build.gradle file
#限制android版本号
code-push release-react MyApp-Android android --targetBinaryVersion "~1.1.0"

3.发布到生产环境

code-push promote  Staging Production //基本使用
// 可以先部分用户更新
code-push promote  Staging Production -r 20% // 20%生效
再 
code-push patch  Production -r 100% //全部生效

4.查看发布情况

code-push deployment list 

多部署环境测试(Multi-Deployment Testing)

修改android/app/build.gradle文件,分别设置debug和release对应的key

android {
    ...
    buildTypes {
        debug {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '""'
            ...
        }

        release {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '""'
            ...
        }
    }
    ...
}

然后修改MainApplication.java

new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG);

参考

http://microsoft.github.io/code-push/docs/react-native.html

你可能感兴趣的:(React Native集成CodePush)