android - 删除 react native webview 上的 android 默认错误页面

Question

我在 react native 中使用 webview，我想在发生某些错误时显示自定义错误消息(例如，没有互联网连接)。

我的代码:

<WebView 
  renderError={() => (
    <MissingConnection />
  )}
  other params....
/>

当加载网页出错时，webview会在几分之一秒内显示默认的android错误，例如: 然后我的 MissingConnection 组件弹出，隐藏了 webview。

有没有办法完全删除默认的 android 错误屏幕？它只闪烁了几分之一秒，结果感觉真的不对。

Answer 1

我的解决方案是警报功能

import React, { Component } from 'react';
import { Alert } from 'react-native';
import { View, Spinner } from 'native-base';
import { WebView } from 'react-native-webview';

export default class ExampleScreen extends Component {

  displaySpinner() {
    return (
      <View style={{ flex: 1 }}>
        <Spinner color="blue" />
      </View>
    );
  }

  displayError() {
    Alert.alert(
      "no_internet",
      "require_internet_connection",
      [
        { text: 'OK', onPress: () => this.props.navigation.goBack() },
      ],
      { cancelable: false });
  }

  render() {
    return (
      <WebView onError={() => this.displayError()}
        startInLoadingState={true}
        renderLoading={() => {
          return this.displaySpinner();
        }}
        source={{ uri: 'https://example.com' }} />
    );
  }
};