React Native——嵌套WebView中的返回处理

直接看代码：

import React, { Component } from 'react';
import { WebView, Platform, BackHandler } from 'react-native';




export default class BoxDemo extends Component {
  onNavigationStateChange = navState => {
    this.setState({
      backButtonEnabled: navState.canGoBack
    });
  };

  // //自定义返回事件
  // _goBackPage = () => {

  //   //  官网中描述:backButtonEnabled: false,表示webView中没有返回事件，为true则表示该webView有回退事件
  //   if (this.state.backButtonEnabled) {
  //     this.refs['webView'].goBack();
  //   } else {//否则返回到上一个页面
  //     this.nav.goBack();
  //   }
  // };

  // 监听原生返回键事件
  componentDidMount() {
    if (Platform.OS === 'android') {
      BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }

  onBackAndroid = () => {
    //  官网中描述:backButtonEnabled: false,表示webView中没有返回事件，为true则表示该webView有回退事件
    if (this.state.backButtonEnabled) {
      this.refs['webView'].goBack();
      return true;
    } else {
     if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
        //最近2秒内按过back键，可以退出应用。
        return false;
      }
      this.lastBackPressed = Date.now();
      ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
      return true;
    }
  };



  render() {
    return (
      <WebView
        source={{ uri: 'http://192.168.0.124:9051/' }}
        style={{ width: '100%', height: '100%' }}
        ref="webView"
        onNavigationStateChange={this.onNavigationStateChange}
      />
    );
  }
}

原文地址：http://www.cnblogs.com/zhengyeye/p/8036598.html