react native webview与H5通信
 rn封装原生jsbridge与H5交互

1：Error loading page Domain: WebKitErrorDomain Error Code: 101 The URL can’t be shown

参考：https://github.com/wuyunqiang/ReactNativeUtil/issues/48

header中是以key:value的形式存在的并且，key中不能有”_”。

  constructor(props){
    super(props);
      this.header = { //header中不能有"_"
          'xxxxx':'testing', //right
          'xxx-xxx':'native', //right
          'xxx_xxx':'native', //fail
      };
      this.webviewParams = {};
  }
    <WebView
              nativeConfig={
                  {
                      props: {
                          backgroundColor: '#ffffff',
                          flex: 1,
                          justifyContent:'center',
                          alignItems: 'center',
                      }
                  }
              }
              userAgent='MyApp'
              ref = {(webview)=>{this.web = webview}}
              style={{width:'100%',height:'100%',justifyContent:'center', alignItems: 'center'}}
              source={{uri:this.state.destinationUrl,headers:this.header}}
              onLoadStart={this.onLoadStart}
              // domStorageEnabled={true}
              // mixedContentMode={'always'}//指定混合内容模式。即WebView是否应该允许安全链接（https）页面中加载非安全链接（http）的内容,never,always,compatibility
              // onLoadEnd = {this.LoadEnd}//加载成功或者失败都会回调
              onError = {this.isConnNet}
              // scalesPageToFit = {true}
              // javaScriptEnabled = {true}//指定WebView中是否启用JavaScript
              onNavigationStateChange={(e) => {
                  this.onNavigationStateChange(e)//可以获取标题 url 等信息
              }} 
              startInLoadingState={true} //强制WebView在第一次加载时先显示loading视图
              // bounces={true}//指定滑动到边缘后是否有回弹效果。
              // scrollEnabled={true}//是否启用滚动
              renderLoading={this.renderLoad}//返回一个加载指示器
              renderError={(e) => {
                  return <View/>;
              }}
          />

有时候使用webview需要查看发送的header信息是否正确发送，一般我们都是和后台配合来检验的。其实我们也可以自己来检验，自己启动一个node作为服务端，然后连接本地的node服务来查看header信息。

var http = require('http');
var port = 9000;

function logRequest(request) {
    console.log("request headers: ", request.headers)
    console.log("Processing request for: ", request.url)
    console.log('Time',new Date().toString())

}

http.createServer(function(request, response) {
    response.writeHead(200, {"Content-Type": "text/html"});
    switch(request.url) {
        case "/":
            response.write("<html><body>Welcome<a href='/bye'>Bye</a></body></html>");
            logRequest(request)
            break;
        case "/bye":
            response.write("<html><body>Bye<a href='/'>Welcome</a></body></html>");
            logRequest(request)
            break;
        default:
            break;
    }
    response.end();
}).listen(port);

1：新建js文件取名server.js 然后复制上面的代码
2：打开命令行 node ../../server.js（server.js 路径）
3：修改webview 的source路径添加header信息

 source={{uri: "http://localhost:9000/", headers: {name:"wuyunqiang",do:"testing"}}}

4：正常运行应用打开webview页面命令行显示如下

rn webview问题

1：Error loading page Domain: WebKitErrorDomain Error Code: 101 The URL can’t be shown

1：webview添加header问题

3：如何查看header头部信息

猜你喜欢