wuyunqiang / ReactNativeUtil

30 stars 6 forks source link

Error loading page Domain: WebKitErrorDomain Error Code: 101 The URL can't be shown #48

Open wuyunqiang opened 6 years ago

wuyunqiang commented 6 years ago

webviewerror.png

fix:

<WebView
              style={{backgroundColor:'blue',flex:1}}
              nativeConfig={//关键部分:这个修改错误
                  {
                      props: {
                          backgroundColor: '#ffffff',
                          flex: 1,
                      }
                  }
              }
              ref = {(webview)=>{this.web = webview}}
              style={{width:'100%',height:'100%',marginTop:this.isIphoneX()?40:Platform.OS==='ios'?20:0}}
              source={{uri: this.state.url}}
              domStorageEnabled={true}
              mixedContentMode={'always'}//指定混合内容模式。即WebView是否应该允许安全链接(https)页面中加载非安全链接(http)的内容,never,always,compatibility
              onLoadEnd = {this.LoadEnd}//加载成功或者失败都会回调
              onError = {this.isConnNet}
              javaScriptEnabled = {true}//指定WebView中是否启用JavaScript
              scalesPageToFit={true}
              onNavigationStateChange={(e) => {
                  console.log("onNavigationStateChange",e)
                  this.onNavigationStateChange(e)
              }}
              startInLoadingState={true} //强制WebView在第一次加载时先显示loading视图
              bounces={true}//指定滑动到边缘后是否有回弹效果。
              scrollEnabled={true}//是否启用滚动
              renderLoading={this.renderLoad}//返回一个加载指示器
              renderError={ (e) => {//关键部分:这个出错渲染页面
                  return null;
              }}
          />

原因分析: https://www.jianshu.com/p/1e15a43d036f 如果webview的地址不可访问时,iOS会白屏而且双击还会缩小 如图: iosweb.gif fix:

     renderError={(e) => {//这里判断如果加载报错 返回一个视图
                  if(e=="NSURLErrorDomain"){
                      console.log("e NSURLErrorDomain",e);
                      return <View style={{width:"100%",height:"100%",justifyContent:'center',alignItems:"center"}}>
                          <TouchableOpacity activeOpacity={0.8} onPress={this.refresh}>
                          <Text style={{fontSize:16,color:"#333333",}}>无法连接</Text>
                          </TouchableOpacity>
                      </View>
                  }else if(e=="WebKitErrorDomain"){
                      console.log("e WebKitErrorDomain",e);
                      return null;
                  }
                  console.log("e",e);
                  return <View/>;
              }}