React Native 从零单排8 html通信

RN版本：0.64
系统：Win10

前言

开发RN应用的的时候，遇到过一个问题，由于业务比较复杂，页面数据比较庞大,在操作工程中会遇到页面re-render过度的情况，但是优化起来也很难，于是想到用WebView内嵌html的方式来处理这个页面避免re-render，以提升性能。
在这个过程中势必要用到React Native和html页面之间的通信，这里分享一下

React Native向html页面发送消息:

1. react native页面

import React, {Component} from 'react';
 import {
   View,
 } from 'react-native';
 import {WebView} from 'react-native-webview';

 export default class Demo extends Component {
   constructor(props) {
     super(props);
     this.state = {
       info: null,
     };
   }
 
   render() {
     const that = this;
     return (
      
         {
            that.webview = webview;
          }}
          source={require('./index.html')}
          javaScriptEnabled={true}
          allowUniversalAccessFromFileURLs={true}
          allowFileAccess={true}
          originWhitelist={['*']}
          onMessage={e => {
            this.handleMessage(e);
          }}
          onLoadStart={() => {}}
          onError={e => {
            global.Toast(e.message);
          }}
        />
    
     );
   }
   // 向html发送消息
   postMessage(data) {
     const script = "window.onMessage('" + data + "')";
     try {
       this.webview.injectJavaScript(script);
     } catch (e) {
       setTimeout(() => {
         this.postMessage(data);
       }, 2000);
     }
   }
 
   // 接收html消息并处理
   handleMessage(e) {
     try {
       let data = global.JParse(e.nativeEvent.data);
       console.log(data);
     } catch (e) {
       console.warn(e);
     }
   }

 }

index.html