CodePush 熱更新ReactNative之React Native Client SDK

目前用的RN版本都是大於0.30的所以一般用最新的codePush
安裝
1. 前往目錄下安裝 npm install --save react-native-code-push@latest
2. 安裝,推薦使用 rnpm link react-native-code-push 若未安裝rnpm 使用npm i -g rnpm 安裝
3. 配置(iOS)

1. 在AppDelegate.m中加入頭文件 #import "CodePush.h"
2. 用 jsCodeLocation = [CodePush bundleURL]; 替換其他的jsCodeLocation
3. 更改Info.plist ,在裏面增加 CodePushDeploymentKey 從新建的codePush中獲取到開發環境的key;可以用這個顯示key code-push deployment ls <appName> -k

1. 配置(安裝)
   

1. 在 MainApplication.java 中加入修改

// 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<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)
            );
        }
    };
}

5.發佈版本包

//基本不會出錯的方法
code-push release-react <appName> <platform>
code-push release-react MyApp ios
code-push release-react MyApp-Android android

自己定義的版本發佈

# Release a mandatory update with a changelog//發佈強制性升級的包,並添加描述
code-push release-react MyApp ios -m --description "Modified the header color"
# 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
code-push release-react MyApp-Android android --targetBinaryVersion "~1.1.0"

6.JavaScript中代碼

//導入文件
import codePush from "react-native-code-push";
//設置檢查更新的方法-開啓檢查更新
let CodePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_START };

class MyApp extends Component {
render (){

}
componentDidMount() {
    codePush.sync({
      updateDialog: false,//檢查更新,不彈出提示
      installMode: codePush.InstallMode.ON_NEXT_RESUME//更新模式,下一次進入
    });
    //如果你期望更及時的獲得更新，可以在每次APP從後臺進入前臺的時候去主動的檢查更新：
    AppState.addEventListener("change", (newState) => {
      newState === "active" && codePush.sync();
    });
  }
componentWillMount() {
    // Ensure that any CodePush updates which are
    // synchronized in the background can't trigger
    // a restart while this component is mounted.
    // codePush.disallowRestart();
    codePush.allowRestart();
  }
componentWillUnmount() {
    // Reallow restarts, and optionally trigger
    // a restart if one was currently pending.
    codePush.allowRestart();
  }
}
MyApp = codePush(CodePushOptions)(MyApp);
AppRegistry.registerComponent('codePushTest', () => MyApp);