view.js

import React, { useEffect, useState, useRef, useCallback } from 'react'
import { Alert, Linking, Modal, View, TouchableNativeFeedback, Text } from 'react-native'
import { getVersionCode, setStorage, getStorage } from '../../libs/utils'
import { getTopVersion } from '../../api/version'
import { XbdToast } from 'rn-ui'
import { styles } from './styles'
import { APP } from '../../config'


let http
const Component = () => {
    const [show, setShow] = useState(false)
    const [version, setVersion] = useState('')
    const downUrl = useRef('')

    /** 打开下载链接 */
    const openDown = () => {
        Linking.openURL(downUrl.current)
            .catch(() => {
                XbdToast.show('打开下载地址失败，请重试')
            })
    }

    /**insterLog */
    const insterLog = useCallback(() => setStorage('checkUpdateTime', new Date().getTime() + 86400000), [])

    const getUpdate = async () => {
        const notFirst = await getStorage(APP.notFirstInstall)
        
        if (new Date().getTime() < (await getStorage('checkUpdateTime') || 0) && notFirst === null) return

        const versionCode = await getVersionCode()

        http = getTopVersion(APP.APP_CODE, res => {
            if (res === null) return
            
            const { version_code, down, version, is_update } = res
            downUrl.current = down
            
            if (version_code > versionCode && is_update) {
                setShow(true)
                setVersion(version)
            }
            else if (version_code > versionCode)
                // 保存查询时间
                Alert.alert('重要提示', `发现新版本${version}需要更新，是否更新`, [ 
                    { text: '一天后提醒', onPress: insterLog }, 
                    { text: '取消' }, 
                    { text: '立即更新', onPress: openDown }
                ])
        })
    }
    useEffect(() => {
        setTimeout(() => getUpdate(), 3000)
        return () => http && http.cancel()
    }, [])

    return (
        <Modal visible={show} transparent={true} style={styles.body}>
            <View style={styles.body}>
                <View style={styles.modal}>
                    <Text style={styles.title}>重要提示</Text>
                    <Text style={styles.content}>发现新版本{version}，需要更新才能继续使用。请更新后重新进入APP</Text>
                    <TouchableNativeFeedback onPress={openDown}>
                        <View style={styles.button}>
                            <Text style={styles.buttonTitle}>立即更新</Text>
                        </View>
                    </TouchableNativeFeedback>
                </View>
            </View>
        </Modal>
    )
}

export default Component