view.tsx

/**
 * @author sheng
 * @description 隐私政策
 * @date 2020/09/03
 */
import { NavigationProp } from '@react-navigation/native'
import React, { useEffect, useState } from 'react'
import { View, ActivityIndicator } from 'react-native'
import WebView from 'react-native-webview'
import { APP } from '../../../config'
import { RouteList } from '../../../router/route'
import { styles } from './style'

const Page: React.FC<{ navigation: NavigationProp<RouteList> }> = ({ navigation }) => {
    const [show, setShow] = useState(false)
    const indicator = (): React.ReactNode => {
        return (
            <View style={styles.wrapper}>
                <ActivityIndicator size={'large'} />
            </View>
        )
    }

    useEffect(() => {
        setShow(true)
        const remove = navigation.addListener('beforeRemove', e => {
            e.preventDefault()
            setShow(false)
            remove()
            navigation.goBack()
        })

        return (): void => remove && remove()
    }, [])

    return (
        <View style={{ flex: 1 }}>
            { show &&
                <WebView
                    style={{ flex: 1 }}
                    startInLoadingState={true}
                    renderLoading={indicator}
                    source={{ uri: APP.privacyLink }}
                />
            }
        </View>

    )
}

export default Page