Question

我正在使用react-native-webview来呈现Web视图。当我在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表明weViewRef中存在goBack方法

在此处https://github.com/react-native-community/react-native-webview/blob/master/src/WebView.ios.tsx

中可以找到抛出nodeHandle expected to be non-null的代码。

我无法理解getWebViewHandle的问题以及nodeHandle为空的原因。

Answer 1

我有同样的问题。原来，我的本机版本太低了。至少查询0.57。升级到0.59.5和其他依赖项后，此问题消失了。

Answer 2

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

版本： "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引用保存为全局状态，只需保存您需要的内容，就会出现一些错误。

React-Native-Webview：期望nodeHandle不为null

2 个答案: