React Native WebView加载错误处理

Question

当网络视图加载无效的网址时，应设置哪个属性以显示错误视图？我尝试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>
)
}

这是屏幕截图

[更新]当我重新加载以清除错误时，有一个临时状态显示错误视图。

Answer 1

您可以使用onError如下所示的prop 在出现错误后呈现视图，并尝试处理不同的 WebView 错误。renderError可用于呈现在解决 WebView 错误时显示的视图

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>
                    <Text>Error occurred while loading the page.</Text>
                  </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>);
};

记得安装urijs并导入它以便使用URI.