实现在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: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,
     }
 });