React-Native：按下 android 硬件后退按钮返回

Question

当按下android后退按钮时，我正在尝试添加返回webview，但我仍然无法使其工作。

这是我的代码：

 <WebView
    ref={WEBVIEW_REF}
    source={source}
    domStorageEnabled={true}
    onNavigationStateChange={this.onNavigationStateChange}
/>

componentDidMount() {
    BackAndroid.addEventListener('hardwareBackPress', function() {
        if(this.state.backButtonEnabled) {
            this.refs[WEBVIEW_REF].goBack();
            return true;
        }
    });
};

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

使用上面的代码，我得到错误 undefined is not an object this.state.backButtonEnabled （在状态中设置）。

我只是想看看 goBack 是否有效，所以我删除了 if 语句，然后我得到错误 undefined is not an object this.refs [WEBVIEW_REF]。

什么是最好的解决方案？

原文由 NinetyHH 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

class MyComponent extends Component {
    state = {};
    componentDidMount(){
         BackHandler.addEventListener('hardwareBackPress', this.backHandler);
    }
    componentWillUnmount(){
         BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
    }
    backHandler = () => {
        if(this.state.backButtonEnabled) {
            this.refs[WEBVIEW_REF].goBack();
            return true;
        }
    }
}

1）绑定你的处理程序 2）不要忘记在卸载时删除监听器。

原文由 Yozi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

想添加一个完整的例子，以防它帮助任何人：

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

class ExampleWebView 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
        source={{ uri: "https://www.google.com" }}
        ref={(webView) => { this.webView.ref = webView; }}
        onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}
      />
    );
  }
}

原文由 RamRovi 发布，翻译遵循 CC BY-SA 4.0 许可协议