React native 应对本机webview导航问题

我正在使用react Navigation和webview进行测试，我有两个屏幕，主页和详细信息，在详细信息屏幕上，我正在调用/打开webview内的一个网页，假设我正在调用stackoverflow.com（第a页），我的问题是，当用户单击stackoverflow页面的链接并导航后，想要返回到上一页（第A页），它不去，它去或导航到主屏幕！！！ 如何让用户返回到上一页？ 这就是我对页面的称呼

<WebView
        javaScriptEnabled
        source={{uri: 'https://stackoverflow.com/'}}
        style={{marginTop: 20}}
      />

---

正如我们所知，内置后退按钮在iOs中不提供，但在android中提供

因此，考虑到这两种平台，有两种可能性

安卓。

->对于android，您必须定义

BackHandler

，以下是步骤

导入

如下所示

从“react native”导入{BackHandler}

在生命周期方法内初始化

backhandler

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}

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

handleBackPress = () => {
   if (this.state.canGoBack) {
      this.refWeb.goBack();
    }
  else{
    this.props.navigation.goBack(null)
    }
  return true;
}

在

状态中定义用户定义变量
canGoBack

  constructor(props) {
    super(props)

    this.state = {
      canGoBack: false
    }
   }  

创建一个方法，用于检测web视图导航中的更改，并将其与web视图绑定

 onNavigationStateChange(navState) {
      this.setState({
      canGoBack: navState.canGoBack
   });
 }

像这样绑起来

        <WebView
            ref={(myWeb) => this.refWeb = myWeb}
            onNavigationStateChange={this.onNavigationStateChange.bind(this)}               
            source={{ uri: 'https://stackoverflow.com/questions/51712310/react- 
            native-webview-navigation-issue' }} />

注释：这里我使用 Staskavigigor 进行屏幕导航，所以我使用了<代码>。道具。导航。GOBACK（NULL）此代码。如果您不使用该代码，则不要考虑此代码，并在>E/C>>条件

中用您的可行导航代码替换该代码。

---

谢谢。

完美！！我找到了几种解决方案，但都是最好的，效果也很好。！！我尝试了上述方法，但canGoBack总是返回错误。详细说明：

if (this.state.canGoBack) {
    this.refWeb.goBack();
}else{
    this.props.navigation.goBack(null)
}