React-Native-Webview：预期 nodeHandle 不为空答案

【问题标题】：React-Native-Webview: Expected nodeHandle to be not nullReact-Native-Webview：预期 nodeHandle 不为空
【发布时间】：2019-08-27 08:57:23
【问题描述】：

我正在使用react-native-webview 来呈现网页视图。当我在 web 视图中从一个页面导航到另一个页面然后尝试使用 this.webviewref.goBack() 返回时，我得到了 nodeHandle expected to be non-null 的异常。

这是我的一段代码

 <View style={{ flex: 1 }}>
        <Header
          headingText={headerText}
          onpress={() => {
            // this.dispatchCustomEvent(BACK_PRESS);
            if (this.canGoBack) {
              this.webViewRef.goBack();
            } else NavigationActions.pop();
          }}
        />
        <WebView
          source={{ uri: "http://localhost:3001/invite/" }}
          bounces={false}
          javaScriptEnabled={true}
          ref={webViewRef => (this.webViewRef = webViewRef)}
          // injectedJavaScript={patchPostMessageJsCode}
          onMessage={event => {
            const { type, data } = JSON.parse(event.nativeEvent.data);
            console.log({ type });
            console.log({ data });
            this.handleEvent(type, data);
          }}
          onNavigationStateChange={navState =>
            (this.canGoBack = navState.canGoBack)
          }
        />
      </View>

控制台日志this.webViewRef显示goBack方法存在于weViewRef中

抛出nodeHandle expected to be non-null的代码可以在这里找到https://github.com/react-native-community/react-native-webview/blob/master/src/WebView.ios.tsx

我无法理解getWebViewHandle 有什么问题以及为什么nodeHandle 为空。

【问题讨论】：

标签： ios react-native webview react-native-webview

【解决方案1】：

我也遇到了这个问题，我找到了解决方案，至少是我的解决方案。我有这段代码：

版本： "react": "16.11.0" "react-native": "0.62.2" "react-native-webview": "^9.4.0"

<WebView
     ref={this._setWebviewRef}
     onNavigationStateChange={this._handleWebViewNavigationStateChange}
     onMessage={this._handleOnMessage}
     source={{uri: this.state.dashboardUrl || ''}}
     renderLoading={() => <LoadingSpinner />}
     startInLoadingState
     incognito
/>

this._setWebviewRef 是下一个：

_setWebviewRef = (ref) => {
    if (ref && !this.props.webviewRef) {
      const {goBack} = ref;
      goBack && this.props.setWebviewRef({goBack});
    }
};

我正在使用redux 保存goBack 方法以在典型的_handleAndroidBackButton 上使用它。所以正如其他人所说，我给了 fu***** nodeHandle expected to be non-null 但我看到 goBack 方法存在于 _handleAndroidBackButton 上下文中。调试我看到ref WebView 方法有多个调用，而不仅仅是我控制的 1 次。所以，删除这个条件&& !this.props.webviewRef 已经生效了。

此外，我曾尝试将我的 uri 设置为“硬编码”，但出现相同的错误，因此这对我不起作用。

PD：不要尝试将整个 WebView 引用保存在全局状态，只需保存您需要的内容，我们会遇到一些错误。

【讨论】：

【解决方案2】：

我遇到了同样的问题。原来我的 react-native 版本太低了。它至少需要 0.57。升级到0.59.5等依赖后，这个问题就消失了。

【讨论】：