import React, { useState } from 'react'; import { Modal, StyleSheet, View, Dimensions, Alert } from 'react-native'; import Loader from './Loader'; import { WebView } from 'react-native-webview'; import { colors } from '../Theme'; import { Button } from 'react-native-elements'; import H1 from './H1'; const { height } = Dimensions.get('window'); const styles = StyleSheet.create({ button: { backgroundColor: colors.primary, }, }); function WebViewModal({ uri, title, visible, onClose, }: { uri: string; title: string; visible: boolean; onClose: () => void; }) { const [loadingWebview, setLoading] = useState(true); return ( <Modal animationType="fade" presentationStyle="pageSheet" visible={visible} onDismiss={onClose} onRequestClose={onClose}> <View style={{ padding: 16, justifyContent: 'space-between' }}> <View style={{ height: height - 150 }}> <H1 title={title} /> {loadingWebview ? ( <View style={{ paddingVertical: 20 }}> <Loader /> </View> ) : null} <WebView onLoad={() => setLoading(true)} onLoadEnd={() => setLoading(false)} source={{ uri }} /> </View> <View> <Button buttonStyle={styles.button} title="关闭预览" onPress={onClose} /> </View> </View> </Modal> ); } export default WebViewModal;