反应原生 webview 导航问题答案

【问题标题】：react native webview navigation issue反应原生 webview 导航问题
【发布时间】：2018-08-06 16:50:54
【问题描述】：

我正在使用 react navigaton 和 webview 进行测试，我有 2 个屏幕，主页和详细信息，在详细信息屏幕上我正在调用/打开 webview 内的网页，假设我正在调用 stackoverflow.com（页面 A），我的问题是，当用户单击 stackoverflow 页面的链接并导航并想要返回上一页（页面 A）之后，它不会去，它会去或导航到主屏幕！我怎样才能让用户回到上一页。 ? 这就是我调用页面的方式

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

【问题讨论】：

标签： react-native

【解决方案1】：

据我们所知，内置的后退按钮在 iOs 中不提供，但在 android 中提供。

所以考虑这两个平台有两种可能性。

Android。

-> 对于 android 你必须定义BackHandler 所以这里是步骤。

import是这样的。

import {BackHandler } from 'react-native'。

在生命周期方法中初始化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;
}

在status 中定义一个用户定义变量canGoBack。

  constructor(props) {
    super(props)

    this.state = {
      canGoBack: false
    }
   }

创建一个检测 webview 导航变化并将其与 web view 绑定的方法。

 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' }} />

你已经准备好了..

iOS

对于 iO，您不必费心。

在webview 上方或根据您的设计逻辑创建一个用于后按的按钮
按照上面的webview 和导航逻辑。忘记了backhandler 并将此代码设置在您创建的button 的backpress 的onPress() 方法中
```
if (this.state.canGoBack) {
    this.refWeb.goBack();
}else{
    this.props.navigation.goBack(null)
}
```

注意：这里我使用stackNavigator 进行屏幕导航，所以我使用了this.props.navigation.goBack(null) 这个代码。如果您没有使用它，请不要考虑此代码并在else 条件下用您可行的导航器代码替换

谢谢你..

【讨论】：

完美！！我找到了几种解决方案，但它是最好的并且可以完美运行。！！
我试过了，但 canGoBack 总是返回 false。详细说明：stackoverflow.com/questions/66333341/…