React-Native-Webview: ожидается, что nodeHandle будет не нулевым

Question

Я использую react-native-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 нулевой.

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. Так что, как говорили другие парни, я трахалсяnodeHandle expected to be non-null но я видел, что метод goBack существует на _handleAndroidBackButtonконтекст. Отладка я видел этоrefМетод WebView имеет несколько вызовов, а не только один раз, как я контролировал. Итак, удаляя это условие&& !this.props.webviewRef уже работает.

Кроме того, я попытался установить свой uri с той же ошибкой, чтобы это не сработало.

PD: не пытайтесь сохранить всю ссылку WebView в глобальном состоянии, просто сохраните то, что вам нужно, у вас будут некоторые ошибки.

Answer 3

Причина этой проблемы может заключаться в том, что ваш компонент в начале рендерился для определенного условия, но после того, как условие не выполняется, модифицированный компонент удаляется, но ссылка на компонент не пустая. Следовательно, при вызове метода компонента вызывается метод компонента, потому что компонент не пустой, но ссылка все еще не пуста, что приводит к ошибке. Чтобы скорректировать ошибку, вызванную описанной выше ситуацией, просто установите переменную, на которую ссылается предыдущее присваивание, на null при удалении компонента.