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

Question

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

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

Answer 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

Answer 2

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