情景描述：
从一个名为“My”的组件点击进去，进入一个列表(该列表内容为webView中内容)，其中一个webView也可以点击进入详情页(也为webView)，但是如果对导航栏不做任何处理，直接点击返回按钮，便会直接从详情页跳转至最顶层页面，而返回不到该列表内容页；很显然这并非我们想要的效果，于是就需要在原有导航返回事件中增加对webView返回事件的处理，完整代码如下(由于拍的视频格式有问题，就看不了效果图了~~~桑心，只能凑合看看代码了)：
export class CommonProblem extends Component {//自定义一个组件 ???static navigationOptions = ({ navigation }) => { ???????return { ???????????headerTitle: ‘常见问题‘, ??//导航标题 ???????????headerTitleStyle: { ???????????????alignSelf: ‘center‘, ???????????????textAlign: ‘center‘, ???????????????fontSize: 16, ???????????????color: ‘#FFF‘ ???????????}, ???????????headerLeft: ( ???????????????<TouchableHighlight ???????????????????activeOpacity={1} ???????????????????underlayColor={skin.main} ???????????????????onPress={() => { ???????????????????????navigation.state.params.goBackPage(); ???????????????????}} ???????????????> ???????????????????<View style={{ paddingLeft: 20 }}> ???????????????????????<Icon name="ios-arrow-round-back-outline" size={30} style={{ color: ‘#FFF‘ }} /> ???????????????????</View> ???????????????</TouchableHighlight> ???????????), ???????????????????????????????????????????????//导航左与导航右是为了让导航标题居中(Why?) ???????????headerRight: <View style={{ paddingRight: 20 }} /> ???????}; ???}; ???constructor(props) { ???????super(props); ???????this.nav = this.props.navigation;//导航 ???????// 添加返回键监听(对Android原生返回键的处理) ???????this.addBackAndroidListener(this.nav); ???} ???componentDidMount() { ???????this.props.navigation.setParams({//给导航中增加监听事件 ???????????goBackPage: this._goBackPage ???????}); ???} ???????????????//自定义返回事件 ???_goBackPage = () => { ???????????????????????????????// ?官网中描述:backButtonEnabled: false,表示webView中没有返回事件，为true则表示该webView有回退事件 ???????if (this.state.backButtonEnabled) { ???????????this.refs[‘webView‘].goBack(); ???????} else {//否则返回到上一个页面 ???????????this.nav.goBack(); ???????} ???}; ???//获取链接 ???getSource() {//config.HelpProblemUrlTest是webView的地址(一个独立的H5页面) ???????if (!config.Release) { ???????????return config.HelpProblemUrlTest; ???????} ???????return config.HelpProblemUrl; ???} ???onNavigationStateChange = navState => { ???????this.setState({ ???????????backButtonEnabled: navState.canGoBack ???????}); ???}; ???// 监听原生返回键事件 ???addBackAndroidListener(navigator) { ???????if (Platform.OS === ‘android‘) { ???????????BackHandler.addEventListener(‘hardwareBackPress‘, this.onBackAndroid); ???????} ???} ???onBackAndroid = () => { ???????if (this.state.backButtonEnabled) { ???????????this.refs[‘webView‘].goBack(); ???????????return true; ???????} else { ???????????return false; ???????} ???}; ???render() { ???????let Dimensions = require(‘Dimensions‘); ???????let { width, height } = Dimensions.get(‘window‘); ???????return ( ???????????<View style={{ backgroundColor: skin.lightSeparate, flex: 1 }}> ???????????????<WebView ???????????????????source={{ uri: this.getSource() }} ???????????????????style={{ flex: 10, justifyContent: ‘center‘, alignItems: ‘center‘, width: width }} ???????????????????ref="webView" ???????????????????onNavigationStateChange={this.onNavigationStateChange} ???????????????/> ???????????</View> ???????); ???}}React Native(十二)——嵌套WebView中的返回处理
原文地址：http://www.cnblogs.com/zhengyeye/p/8036598.html