123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 |
- 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,
- },
- });
|