react-native <WebView>内部网页跳转并返回上一级

使用Rn的WebView控件时，遇到的网页内部跳转如何返回的问题。

• 点原生Back键返回；
• 点左上角返回键返回；

上代码

import React, {Component} from 'react';import {StyleSheet, Platform, View, WebView, BackAndroid} from 'react-native';import * as CommonUI from 'rncommonui';import Separator from '../../common/SeperatorLine';var WEB_URL = 'http://www.baidu.com';var WEB_VIEW_REF = 'webview';export default class AboutDeveloperPage extends Component {    constructor(props) {        super(props);        this.state = {            webUrl: WEB_URL,            scalesPageToFit: false,        };        // 添加返回键监听        this.addBackAndroidListener(this.props.navigator);    }    render() {        return (            <View style={{backgroundColor: '#000000', flex: 1}}>                <CommonUI.NaviBar title="关于开发者" onLeft={this.state.backButtonEnabled?this.goBack:null}/>                <Separator />                <WebView                    ref={WEB_VIEW_REF}                    style={styles.webView}                    source={{uri: this.state.webUrl}}                    scalesPageToFit={this.state.scalingEnabled}                    onNavigationStateChange={this.onNavigationStateChange}/>            </View>        );    }    goBack = () => {        this.refs[WEB_VIEW_REF].goBack();    };    // 监听返回键事件    addBackAndroidListener(navigator) {        if (Platform.OS === 'android') {            BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);        }    }    onBackAndroid = ()=> {        if (this.state.backButtonEnabled) {            this.refs[WEB_VIEW_REF].goBack();            return true;        } else {            return false;        }    };    onNavigationStateChange = (navState)=> {        this.setState({            backButtonEnabled: navState.canGoBack,        });    };}

点原生Back键返回：

1.首先要添加backandroid监听

// 监听返回键事件    addBackAndroidListener(navigator) {        if (Platform.OS === 'android') {            BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);        }    }

用以实现自定义onBackAndroid回调方法。

onBackAndroid = ()=> {        if (this.state.backButtonEnabled) {            this.refs[WEB_VIEW_REF].goBack();            return true;        } else {            return false;        }    };

返回true代表不调用默认返回功能，返回false代表退出当前界面。

this.refs[WEB_VIEW_REF].goBack();//回退<WebView>控件内部跳转的页面。

返回WebView界面还是退出当前页取决于

this.state.backButtonEnabled//代表是否能回退

WebView内部跳转后状态改变时回调：

onNavigationStateChange = (navState)=> {        this.setState({            backButtonEnabled: navState.canGoBack,        });    };

改变this.state.backButtonEnabled状态。

点左上角返回键返回

<CommonUI.NaviBar title="关于开发者" onLeft={this.state.backButtonEnabled?this.goBack:null}/>

关键是onLeftfang方法定义，null代表点击直接返回当前页。
this.goBack方法用于WebView内部页面返回。

goBack = () => {        this.refs[WEB_VIEW_REF].goBack();    };