rn中webview的引入，使用

安装
yarn add react-native-webview    我的版本：7.4.3
使用:

<WebView
          onLoadStart={() => {
              console.log("当WebView刚开始加载时调用的函数")
          }}
          onNavigationStateChange={(e) => console.log(e)}//当导航状态发生变化的时候调用。

//
          startInLoadingState={true}
          renderLoading={() => (<View><Text>加载中</Text></View>)}//loading效果

          allowsInlineMediaPlayback={true}
          javaScriptEnabled={true}//是否执行js代码
          injectedJavaScript={}//插入的js代码，必须是字符串，

         // source={{uri: 'file:///android_asset/detail.html'}}        //本地的html代码需要放在安卓目录的静态文件下
          source={{html:`<h1>啊啊啊</h1>`}}　　　　　　　　　　　　　//引入html字符串，以及网上https://www.baidu.com　
          style={{flex: 1, marginTop: 20}}                         //样式
          onMessage={(event) => {
              console.log("html页面传过来的参数", event.nativeEvent.data)
          }}
          ref={webView => this.webView = webView}
      />

传递流程：
 rn调用 this.webview.postMessage（message）--->injectedJavaScript='document.addEventListener('message', function(e) {其中e.data就是传过来的参数} '
第二种传递方式（推荐使用第二种）
　　rn向h5的发送
　　　　rn触发点击事件执行，其中true时必不可少的，ref绑定webview
　　　　　　this.refs.webview.injectJavaScript(`receiveMessage("RN向H5发送消息");true;`)
　　　　h5端的接收：在injectedJavaScript属性中，值是一个字符串，window会注册一个receiveMessage
　　　　　　window.receiveMessage = (msg) => {alert(msg)}
　　h5向rn端发送事件
　　　　h5通过事件触发执行函数执行
　　　　　　window.ReactNativeWebView.postMessage('h5向rn端发送的消息')
　　　　rn端通过onMessage函数来接收，接收的参数为e.nativeEvent.data
　　　　　　onMessage={(e) => { console.log("h5发送过来的消息--->",e.nativeEvent.data)}}
代码如下：

import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Alert,
    Button,
} from 'react-native';
import {WebView} from 'react-native-webview';

class Detail extends React.Component {

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={{backgroundColor: 'skyblue', height: 40}}
                                  onPress={() => {
                                      this.refs.webview.injectJavaScript(`receiveMessage("RN向H5发送消息");true;`)
                                  }}
                >
                    <Text>点击</Text>
                </TouchableOpacity>
                <WebView
                    ref="webview"
                    style={{flex: 1, backgroundColor: "red"}}
                    source={{uri: 'https://www.baidu.com'}}
                    injectedJavaScript="
                       window.receiveMessage = (msg) => {
                        alert(msg)
                    }
                    window.ReactNativeWebView.postMessage('H5向RN方式数据')
                    "
                    onMessage={(e) => {
                        console.log("h5发送过来的消息--->",e.nativeEvent.data)
                    }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        marginTop: 20,
        flex: 1,
    },
});

export default Detail;


###项目中所用

webView.current.injectJavaScript(`receiveMessage(${formData.templateId});true;`);

 <WebView
        // source={{uri: 'http://localhost:63342/IntelligentRoad/src/modules/qualityReport/qualityReportDetail/bbbbbb.html'}}
        source={{
            html: `
                    <iframe
                        name="iframeWindow"
                        src=${url}
                        id="iframe"
                        width="100%"
                        height="100%"
                        frameborder="0"
                        style="border: 1px solid red;"
                    >
                    </iframe>
                `,
        }}
        ref="webviews"
        style={{flex: 1}}
         injectedJavaScript="
            window.addEventListener('message',handleMessage,false)
            function handleMessage(event) {
     window.ReactNativeWebView.postMessage(JSON.stringify(event.data))
    event = event || window.event;
    if (event.origin === 'http://localhost:63342') {

    }
}

            window.receiveMessage=(msg)=>{
            var iframeWindow = document.getElementById('iframe').contentWindow;
            iframeWindow.postMessage({
                function:'_g().verifyAndWriteReport()',
                templateId:msg,
            },'*')
            }
        "
        onMessage={(msg) => {
            let e=JSON.parse(msg.nativeEvent.data)
            if(e && e.hasOwnProperty("auditReport") && e.templateId===formData.templateId){
                console.log(7777777777,'ccccccg')
            }
        }}
    />