1

我正在使用react-native-webview渲染 webview。当我在 webview 中从一个页面导航到另一个页面然后尝试使用返回时，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为空。

4

2 回答 2

1

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

于 2019-04-26T17:49:27.457 回答
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});
    }
};

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

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

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

于 2020-05-28T09:34:36.343 回答