ReactNative最新版热更新(实力干货)

这边使用的是微软的codePush

根据下面网址作为参考，然后自己配置把踩的坑给填了，记录一下
https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-ios.md

在RN工程根目录下终端中输入yarn add react-native-code-push，目的是为了在node_modules目录下安装react-native-code-push

以下是iOS工程下的配置

在iOS工程下的podfile文件中加入这句话
pod 'CodePush', :path => '../node_modules/react-native-code-push'
(该路径根据自己的目录来，如果ios文件下直接就是工程，用上面方法即可。如果ios文件下还有一个文件夹，然后该文件夹下是工程，那么就用'../../node_modules/react-native-code-push')
然后执行
pod install
执行成功后会在你的pod中还另外安装了3个库
JWT
Base64
SSZipArchive
如果xcode运行报错的话，可以考虑下是否这3个新加的库在你工程本身中已经存在了，而导致的冲突。
然后在iOS代码中，导入头文件#import <CodePush/CodePush.h>

NSURL *jsCodeLocation;
#if DEBUG
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
jsCodeLocation = [CodePush bundleURLForResource:@"main" withExtension:@"jsbundle" subdirectory:@"bundle"];
#endif
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                            moduleName: @"ptm"
                     initialProperties:nil
                         launchOptions: nil];
JLBRNViewController2 *vc = [[JLBRNViewController2 alloc] init];
vc.view = rootView;
[self.navigationController pushViewController:vc animated:YES];

选择Build Settings tab，点击 + 号，选择Add User-Defined Setting，将key设置为CODEPUSH_KEY，Release 和 Staging的值为前面创建的key，我们直接复制进去即可(Staging可以不添加)

iOS配置RN.png

打开Info.plist文件，在CodePushDeploymentKey中输入$(CODEPUSH_KEY)

然后修改Bundle versions为三位(比如1.0改成1.0.0)

以下是React Native工程下的配置

首先要对RN工程打包

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/PTM/bundle/main.jsbundle --assets-dest ./ios/PTM/bundle(ios/PTM/bundle这个是自己的路径，可以根据自己情况改变。一般情况下直接ios/bundle)

--entry-file ,ios或者android入口的js名称，比如index.js
--platform ,平台名称(ios或者android)
--dev ,设置为false的时候将会对JavaScript代码进行优化处理。
--bundle-output, 生成的jsbundle文件的名称，比如./ios/bundle/index.ios.jsbundle
--assets-dest 图片以及其他资源存放的目录,比如./ios/bundle

离线包生成完成之后，可以在ios目录下看到一个bundle目录，这个目录就是bundle生成的离线资源。

需要在Xcode中添加资源到项目中，必须使用Create folder references的方式添加文件夹.

以下是RN的代码

class App extends React.Component {
  syncImmediate() {
    const updateMessage = CodePush.checkForUpdate() || {};
    CodePush.sync(
    {
    //安装模式
    //ON_NEXT_RESUME 下次恢复到前台时
    //ON_NEXT_RESTART 下一次重启时
    //IMMEDIATE 马上更新
    mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,
    // deploymentKey:
    //   'gwaRE9SPQklEZfICS28F5Gp80_Jt516fb840-58a4-4faf-8f17-0700897bd7ed',
    deploymentKey:
    'Y6LFSjUDhvxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      //对话框
      updateDialog: {
        //是否显示更新描述
        appendReleaseDescription: true,
        //更新描述的前缀。 默认为"Description"
        descriptionPrefix: '更新内容：',
        //强制更新按钮文字，默认为continue
        mandatoryContinueButtonLabel: '立即更新',
        //强制更新时的信息. 默认为"An update is available that must be installed."
        mandatoryUpdateMessage: '必须更新后才能使用',
        //非强制更新时，按钮文字,默认为"ignore"
        optionalIgnoreButtonLabel: '稍后',
        //非强制更新时，确认按钮文字. 默认为"Install"
        optionalInstallButtonLabel: '后台更新',
        //非强制更新时，检查到更新的消息文本
        optionalUpdateMessage: '有新版本了，是否更新？',
        //Alert窗口的标题
        title: '更新提示',
      },
    },
    status => {
      switch (status) {
        case 0:
          alert('已经是最新版本');
          break;
        case 1:
          !updateMessage.isMandatory &&
           alert('更新完成, 再启动APP更新即生效');
          break;
        case 3:
          alert('出错了，未知错误');
          break;
        case 7:
          this.setState({showProcess: true});
          break;
        case 8:
          this.setState({showProcess: false});
          break;
        }
      },
    );
  }
  componentWillMount() {
    CodePush.disallowRestart(); //禁止重启
    this.syncImmediate(); //开始检查更新
  }
  componentDidMount() {
    CodePush.allowRestart(); //在加载完了，允许重启
  }
  render() {
    return (
      <Provider store={store}>
        <HomeApp />
      </Provider>
    );
  }
}
export default CodePush(codePushOptions)(App);

然后是自己如何部署一个code push 云服务器
安装code-push CLI输入
npm install -g code-push-cli
接着注册
code-push register
我们根据提示注册成功后，将获得一个码，我们将这个码填入终端中，之后即登录成功
登录成功后，为了让CodePush服务器有我们的App，我们需要CodePush注册App。这里需要注意如果我们的应用分为iOS和Android两个平台，这时我们需要分别注册两套key。系统默认有两套部署环境，一个是Production和Staging，分别对应生产版的热更新部署，Staging代表开发版的热更新部署，但是我们也可以自定义添加部署环境。
添加应用平台 code-push app add <app_name> <os> <platform>
例如添加iOS平台 $ code-push app add PTM ios react-native,多个平台执行多次
成功之后会输出
│ Name │ Deployment Key
│ Production │ Y6LFSjUDxxxxxxxxxxxxxxxxxxxx
│ Staging │ eVa_f_af_dSxxxxxxxxxxxxxxxxxxx
我们将这个key，写入对应的地方(之前举例的RN代码和iOS代码中)

然后输入
code-push release-react PTM ios --t 1.0.0 --dev false --des '再来2次试试' --d Production --mandatory true
这样我们就成功上传到code push 云服务器上了，这样用户打开对应的界面，就会有更新提示了。