react-native 本地 html并且同时引用css与js文件的方式相互通信

本文链接：https://blog.csdn.net/u013040887/article/details/103313909

想要借助`webview`动态的渲染`html`代码,但是我html中需要用到的一些`css`或者`js`我该如何加载呢？全部写在html中?这好像也可以,但是他呀的,这样样式这么多，在加上`js`,这代码是不是太多了？下面我们来看下如何在`RN`中加载静态资源吧！

我这里的只针对`Android`平台,至于`ios`的我还没有研究过.

1.第一步先打开android/app/src/main/assets,如果没有assets这个文件夹,那就创建一个吧!

2.在assets中创建一个web文件夹用来放js和css文件

3.在web中创建一个index.js和index.css用于测试,具体的自己写吧

4.修改代码

4.1 在WebView中添加baseurl属性:source={{ html:this.props.html,baseUrl:'file:///android_asset/web/'}}重点:file:///android_asset/web/就是我们需要的静态资源地址.

4.2 在html中使用静态文件，只需直接输入文件名即可,如index.js.因为webview中有设置baseUrl.所以会找到assets中你需要的资源并加载进来.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>内容展示</title>
</head>
<script src="index.js"></script>
<link id="mobile-style" type="text/css" rel="stylesheet" href="index.css" />
<body>
  <div class="contert">
      内容展示
  </div>
  <div class="name-box" οnclick='window.postMessage(JSON.stringify(${JSON.stringify(list[1])}))'>
   11111 </div>
  <div style="padding-top:50px;">
      <input id='A' value="1" /> 
      <input id='B' value="1" />
  </div>
<Button id='cacl'>计算</Button> <span>AB相加为</span><span id='sum'></span>

  <div id="output">
  </div>
 
</body>
<script>
  function init(data) {
    document.getElementById('output').innerHTML = JSON.stringify(data)
  }
</script>
<script> 

window.onload = function(){
 
  var bt= document.getElementById('cacl');
    bt.addEventListener('click',function(){
      var valA = document.getElementById('A').value;
      var valB = document.getElementById('B').value;
      var message = JSON.stringify({
            type:'add',
            data:{
              A:valA,
              B:valB
            }
          })
    
      try {
        window.ReactNativeWebView.postMessage(message);
      } catch (error) {
        alert(error)
      }
    });
    
    // 通过注册message方式来监听数据变化
    document.addEventListener('message',function(e){
      document.getElementById('sum').innerText = JSON.parse(e.data).result;
    })
}
 
    </script>
    
</html>

react-native 通过onMessage绑定相应的方法，

Html通过 window.ReactNativeWebView.postMessage(message);把消息发送给RN, Html在加载的时候通过： document.addEventListener('message',callback);方式来监听RN回转过来的消息

RN：接收到信息后，通过：this.refs.webView.postMessage(‘’)，把消息回传给Html

 document.addEventListener('message',function(e){
      document.getElementById('sum').innerText = JSON.parse(e.data).result;
    })

export default class App extends Component {

 
 handleMessage = (e) => {
    
        var event =e.nativeEvent;
        var data=JSON.parse(event.data);
        if(data.type ==='add'){
          let  args= data.data;
          let a = Number(args.A);
          let b = Number(args.B);
          console.log( this.refs.webView.postMessage);
          // 向htnl 发送数据
          this.refs.webView.postMessage(JSON.stringify({
              result:a+b
           }))
        }
    }

 render () {

   return (
           
            <WebView style={styles.container} bounces={false}
                ref="webView"
                scalesPageToFit={true}
                javaScriptEnabled={true}
                automaticallyAdjustContentInsets={false}
                source= {source}
                onMessage={this.handleMessage} 
            >
            </WebView>
   )
}

}