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();
};