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

Posted 2023-02-16

【中文标题】如何使用反应原生 WebView 在模式中显示网页？

【英文标题】：How can i show web page in a modal using react native WebView?

【发布时间】：2020-11-05 16:04:36

【问题描述】：

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

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

【问题讨论】：

你的模态代码在哪里？

【参考方案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。