实现在WebView中返回上一级

代码

import React, {Component} from 'react';
import {Platform, View, WebView, BackHandler,Dimensions,StyleSheet,Text,ToastAndroid} from 'react-native';

var WEB_URL = "https://www.ly.com/FlightQuery.aspx";
var WEB_VIEW_REF = 'webview';
const {width, height} = Dimensions.get('window');
export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            webUrl: WEB_URL,
            scalesPageToFit: false,
        };
        // 添加返回键监听
        this.addBackHandlerListener(this.props.navigator);
    }

    render() {
        return (
            <View style={styles.container}>
                <WebView
                    style={{width,height:height-20,backgroundColor:'white'}}
                    ref={WEB_VIEW_REF}
                    source={{uri: this.state.webUrl}}
                    javaScriptEnabled={true}//是否开启js
                    domStorageEnabled={true}//是否开启存储
                    scalesPageToFit={true}//用户是否可以改变页面
                    startInLoadingState={true}
                    onNavigationStateChange={this.onNavigationStateChange}
                    renderLoading={() => {
                        return <View style={styles.conText}><Text style={styles.txt}>正在加载Loading...</Text></View>
                    }}
                />

            </View>
        );
    }

    // 监听返回键事件
    addBackHandlerListener() {
        if (Platform.OS === 'android') {
            BackHandler.addEventListener('hardwareBackPress', this.onBackHandler);
        }
    }

    onBackHandler = ()=> {//返回true代表不调用默认返回功能，返回false代表退出当前界面。

        if (this.state.backButtonEnabled) {
            this.refs[WEB_VIEW_REF].goBack();//回退<WebView>控件内部跳转的页面
            return true;
        } else {
            return false;

        }
    };

    onNavigationStateChange = (navState)=> {//WebView内部跳转后状态改变时回调：
        this.setState({
            backButtonEnabled: navState.canGoBack,//改变this.state.backButtonEnabled状态
        });
    };
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f2f2f2',
        //paddingTop:20,
    },
    conText:{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    txt:{
        fontSize:20,
    }
});