webViewでandroidのデフォルトのエラーページが表示される/チラつく時の対処方法

注意

本記事はreact nativeの記事です。

はじめに

webViewでページを表示する時に何らかの読み込みエラーとかが出るとあまり印象が良くないので

      renderError={() => {
        return (
          <View>
            <Text>読み込みできませんでした</Text>
          </View>
        )
      }}

みたいな感じでエラー用の表示を作ると思うのですが、なんとAndroidだとrenderErrorを無視してデフォルトのエラーページがでーんと残ったりページを開く時や閉じる時にエラーページがチラつくといった現象が発生します。
色々と調べて対処したので、お困りの方は是非お試しください。

対応内容

• ページを表示する時にディレイをかける
• ディレイ中は読み込みインジケーターを表示させる
• エラーになった場合はabout:blankのページを読み込む

state = {
  url: '',    // webViewで読み込む用のurl
  loading: true　　　// ディレイ用の変数
}


componentDidMount(){
    // 読み込むページのurlを格納する
    this.setState({ url: this.props.url })

    // androidの時、1秒のディレイをかける
    Platform.OS === 'android'
      ? setTimeout(() => {
          this.setState({ loading: false })
        }, 1000)
      : this.setState({ loading: false })

}

// blankページをセットする関数用意
setUrlBlank() {
  this.setState({ url: 'about:blank' }, () => {})
}

render() {
  return (
    {!this.state.loading ? (
      <WebView
        source={{ uri: this.state.url }}
        onError={e => {
          this.setUrlBlank()
        }}
      />
    ) : (
      <View style={styles.loadingIndicatorContainer}>
        <ActivityIndicator size="large" />
      </View>
  )
}

解説

まず、ページを読み込んだ時のチラつきを防ぐために、ページ表示前にディレイをかけます。
ディレイ中にインジケーターを表示させることで、ユーザーのストレスを軽減します
エラーになった時にデフォルトエラーページが出ないようにabout:blankのページをwebViewで読み込ませます。
ただこれだとエラー時に真っ白なページを表示するだけになってしまうので、別途エラー用のHTMLを用意して
読み込ませてあげるとなお良いと思います。

これで一旦は対応ができますが、個人的にはもっとベストプラクティスがありそうな気がしています。。