React-native-webview：按下后退按钮时应用程序退出答案

【问题标题】：React-native-webview: App Exit when pressed the back bottonReact-native-webview：按下后退按钮时应用程序退出
【发布时间】：2020-10-09 03:50:54
【问题描述】：

我正在使用本机反应，并且在我的 web 视图中的页面之间导航时遇到问题，因为每当我按下后退按钮时它都会一直关闭。我试过这个，当我按下返回按钮时出现错误undefined is not an object (evalating 'this.props.navigation.goback') 有人可以帮我吗？谢谢

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



export default class App extends Component {
  constructor(props) {
    super(props)
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
}

componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}

handleBackButtonClick() {
    this.props.navigation.goBack(null);
    return true;
}
 
render(){
          return (
            <WebView
                style={{ marginTop: 0 }}
                source={{ uri: 'https://www.youtube.com' }}
                
            />
          );
        }
       }

【问题讨论】：

标签： react-native webview navigation

【解决方案1】：

此代码有效

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



export default class App extends Component {
  webView = {
    canGoBack: false,
    ref: null,
  }

  onAndroidBackPress = () => {
    if (this.webView.canGoBack && this.webView.ref) {
      this.webView.ref.goBack();
      return true;
    }
    return false;
  }

  componentWillMount() {
    if (Platform.OS === 'android') {
      BackHandler.addEventListener('hardwareBackPress', this.onAndroidBackPress);
    }
  }

  componentWillUnmount() {
    if (Platform.OS === 'android') {
      BackHandler.removeEventListener('hardwareBackPress');
    }
  }
 
render(){
  return (
    <WebView
        style={{ marginTop: 0 }}
        source={{ uri: 'https://www.youtube.com' }}
        useWebKit={true}
        ref={(webView) => { this.webView.ref = webView; }}
        onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}
    />
  );
}
}

【讨论】：