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

想要借助`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中你需要的资源并加载进来.

  
  
  
  




  

      内容展示
  
  

   11111 
  

       
      
  
计算 AB相加为

  

  
 



    

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 (
           
            
            
   )
}

}