react native WebView 高度自适应 RN与网页交互

首先介绍几个属性和方法

1、source

    {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number

   在WebView中载入一段静态html代码或者url（还可以附带一些header选项）。

2、injectedJavaScript 

    设置在网页加载之前注入的一段JS代码。

3、onMessage

    在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数，从而实现网页和RN之间的数据交换。

设置此属性的同时会在webview中注入一个postMessage的全局函数并覆盖可能已经存在的同名实现。

网页端的window.postMessage只发送一个参数data，此参数封装在RN端的event对象中，即event.nativeEvent.data。data只能是一个字符串。

4、onLoadEnd

    加载结束时（无论成功或失败）调用。 

一、高度自适应

例子：

第一种方法：

    首先要在初始化阶段定义初始高度，如果webview的style属性中没有设置高度，内容会不显示。

  constructor(props) {
    super(props);
    this.state = {
      WebViewHeight: 100,
    };
  }

    要显示的html内容

        let html = `  
            
               
              
             
            一些html标签及内容
              ` 

在html的script中获取高度，在WebView的 onNavigationStateChange 函数里设置高度

        {
                  this.setState({
                    WebViewHeight: parseInt(title.title) || 200
                  })
                }}
              />         

上面这种方法我在Android手机中有时获取不到高度

第二种方法：

在url加载结束后，注入一段js代码，用来获取url网页的高度，然后通过与RN交互的方式，把获取的高度通过window.postMessage传回RN中，然后显示

           {
                this.handleMessage(e)
              }}
              javaScriptEnabled={true}
            />

      webViewLoaded = () => {
          this.refs.webview.injectJavaScript(`
              const height = document.body.scrollHeight;
              window.postMessage(height);
          `);
        }

      handleMessage(e) {
        this.setState({
          WebViewHeight: e.nativeEvent.data
        });
      }

二、RN与网页交互

1、网页向RN发送数据

首先在html的script定义一个发送数据的方法

let html = `  
            
               
              
             
            一些html标签及内容按钮
            
             
            `

 {
    this.handleMessage(e)
  }}
/>

在RN中也handleMessage为接收数据的方法，e.nativeEvent.data就是从网页html中传过来的数据

handleMessage(e) {
  console.log(e.nativeEvent.data)
}

2、RN向网页发送数据

首先定义一个发送数据的方法

sendMessage() {
  this.refs.webview.postMessage('RN向网页发送数据');
}

在html中也要有相应的接收数据的方法

window.onload = function () {
  document.addEventListener('message', function (e) {
    document.getElementById('button').textContent = e.data;
  });
}

以上