如何使用反应原生 WebView 在模式中显示网页？答案

【问题标题】：How can i show web page in a modal using react native WebView?如何使用反应原生 WebView 在模式中显示网页？
【发布时间】：2020-11-05 16:04:36
【问题描述】：

我想以模态显示网页，我正在使用这行代码，但它显示的是空白模态。

<WebView source={{uri: 'https://github.com/facebook/react-native'}}/>

【问题讨论】：

你的模态代码在哪里？

标签： react-native webview react-native-modal

【解决方案1】：

您应该从代码中提供更多信息，然后它可以帮助您修复代码本身的错误。但是代码的格式应该在下面。

import React from 'react';
import { View, Button, Modal, StyleSheet, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';

class TestClass extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            showModal : false
        }
    }



    ActivityIndicatorLoadingView() {
       return (
         <ActivityIndicator
            color="#009688"
            size="large"
            style={styles.ActivityIndicatorStyle}
         /> 
       );
    }

    render(){
        return(
            <View style={{flex : 1, justifyContent : 'center', alignItems: 'center'}}>
                <Button title="Press" onPress={() => this.setState({showModal : !this.state.showModal})}/>
                <Modal  visible={this.state.showModal}>
                    <View style={styles.modal}>
                        <View style={styles.modalContainer}>
                            <WebView 
                                style={{ flex : 1 }} 
                                source={{uri: 'https://github.com/facebook/react-native'}}/>
                                renderLoading={this.ActivityIndicatorLoadingView}
                        </View>
                    </View>
                </Modal>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    modal : {
        flex : 1,
        justifyContent : 'center',
        alignItems : 'center',
        backgroundColor: 'rgba(0,0,0,0.5)'
    },
    modalContainer : {
        backgroundColor : 'white',
        width : '90%',
        height : '90%',
    },
    ActivityIndicatorStyle: {
        flex: 1,
        justifyContent: 'center',
    },
})
export default TestClass

【讨论】：

这运行良好，但即使使用手机后退按钮，我也无法返回或取消，并且当我重新加载应用程序时，它没有重新加载。你能给我一个解决方案吗？
你想怎么回去？当按下返回按钮或返回 web 视图时，是取消 Modal 吗？
好的，我删除了模态，我可以在以模态加载页面之前添加一个加载器
好的，现在看看。您也可以将 BackHandler 与 hardwareBackPress 事件一起使用，以在按下后退按钮时关闭您的模式。

【解决方案2】：

我为此开发了不错的软件包。如果你愿意，你可以检查或使用它。包的链接是https://github.com/ilkerkesici/react-native-beauty-webview。

【讨论】：