ネイティブWebView読み込みエラー処理に反応します

Question

webviewが無効なURLを読み込むと、エラービューを表示するためにどのプロパティを設定する必要がありますか？私はrenderErrorを試みます、それはコンソールメッセージを引き起こしますが、ビューを表示しませんでした。ここ

コードです：

<View style={styles.webview_body}> 
    <WebView 
    source={{uri:this.props.url}} 
    onNavigationStateChange={this.onNavigationStateChange.bind(this)} 
    renderError={this.loadError.bind(this)} 
/> 
</View> 

//the fucntion which display the error message 
loadError(){ 
console.log('loaded'); 
return (
    <View> 
    <Text> 
    something goes wrong. 
    </Text> 
    </View> 
) 
} 

ここで[更新]私は、エラーをクリアするためにリロードすると、エラービューを表示する一時的な状態がありますスクリーンショット

です。別のWebViewのエラーを処理しようとするも、エラーが発生した後のビューをレンダリングするために、以下に示すと通り

Answer 1

あなたはonError小道具を使用することができます。 renderErrorは

onError={ (e) => { 
    let uri = new URI(this.props.url); 
    let host = uri.host(); 
    let insecureHosts = [-1004, -6, -1202];//all error codes as displayed on your console 
    if(e){ 
     //Handles NSURLErrorDomain in iOS and net:ERR_CONNECTION_REFUSED in Android 
     if(insecureHosts.indexOf(e.nativeEvent.code) !== -1){ 
      this.setState({url: `http://${host}`}); 
      } 
     //Handles Name resolution errors by redirecting to Google 
     else if(e.nativeEvent.code === -1003 || e.nativeEvent.code === -2){ 
      this.setState({url: `https://www.google.com/#q=${host}`}); 
     } 
    } else { 
    //loads the error view only after the resolving of the above errors has failed 
     return(
      <View> 
       Error occurred while loading the page. 
      </View> 
      ); 
     }}} 
renderError={(e) => { 
//Renders this view while resolving the error 
    return(
     <View> 
      <ActivityIndicator 
      animating={ true } 
      color='#84888d' 
      size='large' 
      hidesWhenStopped={true} 
      style={{alignItems:'center', justifyContent:'center', padding:30, flex: 1}}/> 
      </View> 
    ); 
}} 

がURIを利用するようにurijsをインストールし、それをインポートすることを忘れないでくださいWebViewのエラーを解決するときに表示するビューをレンダリングするために使用することができます。