美文网首页
React-Native集成codePush热更新遇到的问题

React-Native集成codePush热更新遇到的问题

作者: fero2004 | 来源:发表于2018-07-05 23:48 被阅读33次

基本配置略过,百度随便一搜很多,例如以下
https://blog.csdn.net/sinat_17775997/article/details/74016662
但是有一个天坑需要解决

如果是使用codePush.checkForUpdate这种方式检查更新,需要在合适的时机调用codePush.notifyAppReady();
以下网络上的代码是没有调用codePush.notifyAppReady()的

codePush.checkForUpdate(deploymentKey).then((update) => {
                            if (!update) {
                                Alert.alert("提示", "已是最新版本--", [
                                    {
                                        text: "Ok", onPress: () => {
                                        console.log("点了OK");
                                    }
                                    }
                                ]);
                            } else {
                                codePush.sync({
                                        deploymentKey: deploymentKey,
                                        updateDialog: {
                                            optionalIgnoreButtonLabel: '稍后',
                                            optionalInstallButtonLabel: '立即更新',
                                            optionalUpdateMessage: '有新版本了,是否更新?',
                                            title: '更新提示'
                                        },
                                        installMode: codePush.InstallMode.IMMEDIATE,
 
                                    },
                                    (status) => {
                                        switch (status) {
                                            case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                                                console.log("DOWNLOADING_PACKAGE");
                                                break;
                                            case codePush.SyncStatus.INSTALLING_UPDATE:
                                                console.log(" INSTALLING_UPDATE");
                                                break;
                                        }
                                    },
                                    (progress) => {
                                        console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
                                    }
                                );
                            }

经过搜索得知,需要在case status == codePush.SyncStatus.UPDATE_INSTALLED的时候调用codePush.notifyAppReady(); 但实际上在codePush.SyncStatus.UPDATE_INSTALLED这里调用是没用的(具体原因不明,写在这里我是没有成功更新的),更新成功了后,第二次打开会回滚.

正确的方式是在codePush.checkForUpdate前面调用一下codePush.notifyAppReady()
全部代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
    AsyncStorage
} from 'react-native';

import codePush from 'react-native-code-push'

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
const deploymentKey = '你的key';

class DeviceStorage {
    /**
     * 获取
     * @param key
     * @returns {Promise<T>|*|Promise.<TResult>}
     */

    static get(key) {
        return AsyncStorage.getItem(key).then((value) => {
            const jsonValue = JSON.parse(value);
            return jsonValue;
        });
    }


    /**
     * 保存
     * @param key
     * @param value
     * @returns {*}
     */
    static save(key, value) {
        return AsyncStorage.setItem(key, JSON.stringify(value));
    }


    /**
     * 更新
     * @param key
     * @param value
     * @returns {Promise<T>|Promise.<TResult>}
     */
    static update(key, value) {
        return DeviceStorage.get(key).then((item) => {
            value = typeof value === 'string' ? value : Object.assign({}, item, value);
            return AsyncStorage.setItem(key, JSON.stringify(value));
        });
    }


    /**
     * 更新
     * @param key
     * @returns {*}
     */
    static delete(key) {
        return AsyncStorage.removeItem(key);
    }
}


export default class App extends Component<Props> {

    componentDidMount(){

        codePush.notifyAppReady();
        codePush.checkForUpdate(deploymentKey).then((update) => {
            if (!update) {
                DeviceStorage.get('test').then((value) => {
                    if(value === null || value === "0")
                    {
                        DeviceStorage.save("test","1");
                        alert("最新版更新完成", [
                            {
                                text: "Ok", onPress: () => {
                                    console.log("点了OK");
                                }
                            }
                        ]);
                    }
                });
            } else {
                codePush.sync({
                        deploymentKey: deploymentKey,
                        updateDialog: {
                            optionalIgnoreButtonLabel: '稍后',
                            optionalInstallButtonLabel: '立即更新',
                            optionalUpdateMessage: '有新版本了,是否更新?',
                            mandatoryContinueButtonLabel : "确定",
                            mandatoryUpdateMessage : '有新版本了,请更新?',
                            title: '更新提示',
                        },
                        installMode: codePush.InstallMode.IMMEDIATE,

                    },
                    (status) => {
                        switch (status) {
                            case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                                //alert('1');
                                console.log("=====================DOWNLOADING_PACKAGE");
                                break;
                            case codePush.SyncStatus.INSTALLING_UPDATE:
                                //alert('2');
                                // codePush.notifyApplicationReady();
                                // codePush.notifyAppReady();
                                console.log("====================INSTALLING_UPDATE");
                                break;
                            case codePush.SyncStatus.UPDATE_INSTALLED:
                                DeviceStorage.save("test","0");
                                console.log("==============UPDATE_INSTALLED");
                                break;
                        }
                    },
                    (progress) => {
                        console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
                    }
                );
            }
        });
    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!,new test
                </Text>
                <Text style={styles.welcome}>
                    Welcome to React Native!,new test
                </Text>
                <Text style={styles.welcome}>
                    Welcome to React Native!,new test,,123,1222233
                </Text>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit App.js
                </Text>
                <Text style={styles.instructions}>
                    {instructions}
                </Text>
            </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,
  },
});

相关文章

网友评论

      本文标题:React-Native集成codePush热更新遇到的问题

      本文链接:https://www.haomeiwen.com/subject/ruimuftx.html