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

使用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 (
            '#000000', flex: 1}}>
                "关于开发者" onLeft={this.state.backButtonEnabled?this.goBack:null}/>
                
                this.state.webUrl}}
                    scalesPageToFit={this.state.scalingEnabled}
                    onNavigationStateChange={this.onNavigationStateChange}/>
            
        );
    }

    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界面还是退出当前页取决于

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

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

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

改变this.state.backButtonEnabled状态。

点左上角返回键返回

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

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

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