TaxControlApp/page/personalCenter/about.js

import React, {Component} from 'react';
import {
  Image,
  Text,
  View,
  TouchableOpacity,
  Alert,
  SafeAreaView,
  ScrollView,
  Platform,
  Linking,
  StyleSheet,
} from 'react-native';
import {
  isFirstTime,
  isRolledBack,
  packageVersion,
  checkUpdate,
  downloadUpdate,
  switchVersion,
  switchVersionLater,
  markSuccess,
  downloadAndInstallApk,
} from 'react-native-update';
import {WhiteSpace, Progress, Modal, Provider} from '@ant-design/react-native';
import public_css from '../../source/css/public_css';
import _updateConfig from '../../update.json';
const {appKey} = _updateConfig[Platform.OS];

export default class about extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      received: 0,
      total: 0,
      proportion: 0,
      isDownload: false,
    };
  }

  render() {
    return (
      <Provider>
        <SafeAreaView style={public_css.body}>
          <ScrollView>
            <View style={styles.aboutView}>
              <View style={styles.blankView} />
              <View>
                <Image
                  source={require('../../source/img/personal/invoice.png')}
                />
              </View>
              <View style={styles.aboutViewDistance}>
                <Text style={styles.aboutViewText}>云票在线</Text>
              </View>
              <View style={styles.aboutViewDistance}>
                <Text style={styles.aboutVersionText}>
                  版本号：{packageVersion}
                </Text>
              </View>
            </View>
            <Modal
              title="更新进度"
              transparent
              maskClosable
              visible={this.state.isDownload}
              closable={false}>
              <View style={styles.speedView1}>
                <View style={styles.speedView2}>
                  <View style={styles.speedView3}>
                    <Progress percent={this.state.proportion} />
                  </View>
                  <Text>{this.state.proportion}%</Text>
                </View>
              </View>
            </Modal>
          </ScrollView>
          <View style={styles.checkUpdateView}>
            <TouchableOpacity onPress={this.checkUpdate}>
              <Text style={styles.checkUpdateText}>检查更新</Text>
            </TouchableOpacity>
          </View>
          <WhiteSpace />
        </SafeAreaView>
      </Provider>
    );
  }

  componentDidMount() {
    if (isFirstTime) {
      // 必须调用此更新成功标记方法
      // 否则默认更新失败，下一次启动会自动回滚
      markSuccess();
      console.log('更新完成');
    } else if (isRolledBack) {
      console.log('刚刚更新失败了,版本被回滚.');
    }
  }

  // 下载更新
  doUpdate = async (info) => {
    try {
      this.setState({
        isDownload: true,
      });
      const hash = await downloadUpdate(info, {
        onDownloadProgress: ({received, total}) => {
          if (received !== '' && received !== null) {
            if (total !== '' && total !== null) {
              let proportion =
                (parseInt(received, 10) / parseInt(total, 10)) * 100;
              this.setState({
                proportion: proportion,
              });
            }
          }
          this.setState({
            received,
            total,
          });
        },
      });
      this.setState({
        isDownload: false,
      });
      Alert.alert('提示', '下载完毕,是否重启应用?', [
        {
          text: '是',
          onPress: () => {
            switchVersion(hash);
          },
        },
        {text: '否'},
        {
          text: '下次启动时',
          onPress: () => {
            switchVersionLater(hash);
          },
        },
      ]);
    } catch (err) {
      Alert.alert('更新失败', err.message);
    }
  };

  // 检查更新
  checkUpdate = async () => {
    if (__DEV__) {
      // 开发模式不支持热更新，跳过检查
      return;
    }
    let info;
    try {
      info = await checkUpdate(appKey);
    } catch (err) {
      Alert.alert('更新检查失败', err.message);
      return;
    }
    if (info.expired) {
      Alert.alert('提示', '您的应用版本已更新，点击确定下载安装新版本', [
        {
          text: '确定',
          onPress: () => {
            if (info.downloadUrl) {
              // apk可直接下载安装
              if (
                Platform.OS === 'android' &&
                info.downloadUrl.endsWith('.apk')
              ) {
                downloadAndInstallApk({
                  url: info.downloadUrl,
                  onDownloadProgress: ({received, total}) => {
                    if (received !== '' && received !== null) {
                      if (total !== '' && total !== null) {
                        let proportion =
                          (parseInt(received) / parseInt(total)) * 100;
                        this.setState({
                          proportion: parseInt(proportion),
                        });
                        if (parseInt(proportion) >= 100) {
                          this.setState({
                            isDownload: false,
                          });
                        }
                      }
                    }
                    this.setState({
                      received,
                      total,
                    });
                  },
                });
              } else {
                Linking.openURL(info.downloadUrl);
              }
            }
          },
        },
      ]);
    } else if (info.upToDate) {
      Alert.alert('提示', '您的应用版本已是最新.');
    } else {
      Alert.alert(
        '提示',
        '检查到新的版本' + info.name + ',是否下载?\n' + info.description,
        [
          {
            text: '是',
            onPress: () => {
              this.doUpdate(info);
            },
          },
          {text: '否'},
        ],
      );
    }
  };
}

const styles = StyleSheet.create({
  aboutView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  blankView: {
    height: 50,
  },
  aboutViewText: {
    color: '#000000',
    fontSize: 20,
    fontWeight: 'bold',
  },
  aboutViewDistance: {
    marginTop: 10,
  },
  aboutVersionText: {
    color: '#818181',
  },
  checkUpdateText: {
    color: '#6896D4',
    fontSize: 14,
  },
  checkUpdateView: {
    alignItems: 'center',
  },
  speedView1: {
    paddingVertical: 20,
  },
  speedView2: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  speedView3: {
    marginRight: 10,
    height: 4,
    flex: 1,
  },
});