Reactive Native WebView Ladefehlerbehandlung

Question

Wenn die Webansicht eine ungültige URL lädt, welche Eigenschaft sollte ich einstellen, um eine Fehleransicht anzuzeigen? Ich versuche renderError, es löst die Konsolen-Nachricht, aber nicht die Ansicht angezeigt.

hier ist der Code:

<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> 
) 
} 

hier die Screenshots

[Update] Wie ich nachladen den Fehler zu löschen, gibt es ein vorübergehender Zustand, der den Fehler Ansicht angezeigt werden soll.

Answer 1

Sie könnten die onError prop verwenden, wie unten gezeigt, die eine Ansicht nach einem Fehler zu machen und die verschiedenen WebView Handhabungsfehler zu versuchen, auch. renderError können eine Ansicht, die zeigt, machen, verwendet werden, wenn die Fehler WebView Lösung

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> 
    ); 
}} 

Denken Sie daran, urijs und importieren Sie es zu installieren, um die Verwendung von URI zu machen.