React Native App集成CodePush热更新，Function组件编程方式完整代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React, { useEffect, useState } from 'react';
import cpcn from 'cpcn-react-native';
import { SafeAreaView, View, Text, Button, Modal } from 'react-native';
const App = () => {
    const [upgradeState, setUpgradeState] = useState(0);
    const [{ upgradeAllBytes, upgradeReceived }, setUpgradeData] = useState({ upgradeAllBytes: 1, upgradeReceived: 0 });
    useEffect(() => {
        cpcn.check({
            // 检查是否有新版本后调用此方法
            checkCallback: (remotePackage, agreeContinueFun) => {
                if(remotePackage){
                    // 如果 remotePackage 有值，表示有新版本可更新。
                    // 将 upgradeState 的值设为1，以显示提示消息
                    setUpgradeState(1);
                }
            },
            // 下载新版本时调用此方法
            downloadProgressCallback: (downloadProgress) => {
                // 更新显示的下载进度中的数值
                setUpgradeData({
                    upgradeReceived: downloadProgress.receivedBytes, // 已下载的字节数
                    upgradeAllBytes: downloadProgress.totalBytes // 总共需下载的字节数
                });
            },
            // 安装新版本后调用此方法
            installedCallback: (restartFun) => {
                // 新版本安装成功了，将 this.state.upgradeState 的值设为0，以关闭对话框
                setUpgradeState(0);
                // 调用此方法重启App，重启后将会使用新版本
                restartFun(true);
            }
        });
    }, []);
    const upgradeContinue = () => {
        // 用户确定更新后，调用此方法以开始更新
        cpcn.agreeContinue(true);
        // 将 this.state.upgradeState 的值设为2，以显示下载进度
        setUpgradeState(2);
    }
    return (
        <SafeAreaView>
            <View>
                <Text>Ver: 1</Text>
            </View>
            <Modal
                visible={upgradeState > 0}
                transparent={true}>
                <View style={{padding:18, backgroundColor:"rgba(10,10,10,0.6)", height:"100%", display:"flex", flexDirection:"row", alignItems:"center"}}>
                    <View style={{backgroundColor:"#fff", width:"100%", padding:18}}>
                        {
                            upgradeState == 1
                            &&
                            <View>
                                <View style={{paddingBottom:20}}>
                                    <Text>发现新版本</Text>
                                </View>
                                <View>
                                    <Button title="马上更新" onPress={upgradeContinue}/>
                                </View>
                            </View>
                        }
                        {
                            upgradeState == 2
                            &&
                            <View>
                                <Text style={{textAlign:"center"}}>{upgradeReceived} / {upgradeAllBytes}</Text>
                            </View>
                        }
                    </View>
                </View>
            </Modal>
        </SafeAreaView>
    );
};
export default App;
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX