react-native android熱更新詳解（2）

快速入門-添加熱更新功能

獲取appKey

檢查更新時必須提供你的appKey，這個值保存在update.json中，並且根據平臺不同而不同。你可以用如下的代碼獲取：

import {
  Platform,
} from 'react-native';

import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];

如果你不使用pushy命令行，你也可以從網頁端查看到兩個應用appKey，並根據平臺的不同來選擇。

檢查更新、下載更新

異步函數checkUpdate可以檢查當前版本是否需要更新：

const info = await checkUpdate(appKey)

返回的info有三種情況：

1. {expired: true}：該應用包(原生部分)已過期，需要前往應用市場下載新的版本。

2. {upToDate: true}：當前已經更新到最新，無需進行更新。

3. {update: true}：當前有新版本可以更新。info的name、description字段可 以用於提示用戶，而metaInfo字段則可以根據你的需求自定義其它屬性(如是否靜默更新、 是否強制更新等等)。另外還有幾個字段，包含了完整更新包或補丁包的下載地址， react-native-update會首先嚐試耗費流量更少的更新方式。將info對象傳遞給downloadUpdate作爲參數即可。

切換版本

downloadUpdate的返回值是一個hash字符串，它是當前版本的唯一標識。

你可以使用switchVersion函數立即切換版本(此時應用會立即重新加載)，或者選擇調用 switchVersionLater，讓應用在下一次啓動的時候再加載新的版本。

首次啓動、回滾

在每次更新完畢後的首次啓動時，isFirstTime常量會爲true。 你必須在應用退出前合適的任何時機，調用markSuccess，否則應用下一次啓動的時候將會進行回滾操作。 這一機制稱作“反觸發”，這樣當你應用啓動初期即遭遇問題的時候，也能在下一次啓動時恢復運作。

你可以通過isFirstTime來獲知這是當前版本的首次啓動，也可以通過isRolledBack來獲知應用剛剛經歷了一次回滾操作。 你可以在此時給予用戶合理的提示。

完整的示例

import React, {
  Component,
} from 'react';

import {
  AppRegistry,
  StyleSheet,
  Platform,
  Text,
  View,
  Alert,
  TouchableOpacity,
  Linking,
} from 'react-native';

import {
  isFirstTime,
  isRolledBack,
  packageVersion,
  currentVersion,
  checkUpdate,
  downloadUpdate,
  switchVersion,
  switchVersionLater,
  markSuccess,
} from 'react-native-update';

import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];

class MyProject extends Component {
  componentDidMount(){
    if (isFirstTime) {
      Alert.alert('提示', '這是當前版本第一次啓動,是否要模擬啓動失敗?失敗將回滾到上一版本', [
        {text: '是', onPress: ()=>{throw new Error('模擬啓動失敗,請重啓應用')}},
        {text: '否', onPress: ()=>{markSuccess()}},
      ]);
    } else if (isRolledBack) {
      Alert.alert('提示', '剛剛更新失敗了,版本被回滾.');
    }
  }
  doUpdate = async (info) => {
    try {
      const hash = await downloadUpdate(info);
      Alert.alert('提示', '下載完畢,是否重啓應用?', [
        {text: '是', onPress: ()=>{switchVersion(hash);}},
        {text: '否',},
        {text: '下次啓動時', onPress: ()=>{switchVersionLater(hash);}},
      ]);
    } catch(err) {
      Alert.alert('提示', '更新失敗.');
    }
  };
  checkUpdate = async () => {
    if (__DEV__) {
      // 開發模式不支持熱更新，跳過檢查
      return;
    }
    let info;
    try {
      info = await checkUpdate(appKey);
    } catch (err) {
      console.warn(err);
      return;
    }
    if (info.expired) {
      Alert.alert('提示', '您的應用版本已更新,請前往應用商店下載新的版本', [
        {text: '確定', onPress: ()=>{info.downloadUrl && Linking.openURL(info.downloadUrl)}},
      ]);
    } else if (info.upToDate) {
      Alert.alert('提示', '您的應用版本已是最新.');
    } else {
      Alert.alert('提示', '檢查到新的版本'+info.name+',是否下載?\n'+ info.description, [
        {text: '是', onPress: ()=>{this.doUpdate(info)}},
        {text: '否',},
      ]);
    }
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          歡迎使用熱更新服務
        </Text>
        <Text style={styles.instructions}>
          這是版本一 {'\n'}
          當前包版本號: {packageVersion}{'\n'}
          當前版本Hash: {currentVersion||'(空)'}{'\n'}
        </Text>
        <TouchableOpacity onPress={this.checkUpdate}>
          <Text style={styles.instructions}>
            點擊這裏檢查更新
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('MyProject', () => MyProject);

現在，你的應用已經可以通過update服務檢查版本並進行更新了。下一步，你可以開始嘗試發佈應用包和版本，請參閱發佈應用