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

Question

我正在使用 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 为空。

Answer 1

我遇到了同样的问题。原来是我的react-native版本太低了。它至少需要 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 'hardcoded'，但出现同样的错误，所以这对我不起作用。

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

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

React-Native-Webview: Expected nodeHandle to be not null

ios

react-native

webview

react-native-webview