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')
            }
        }}
    />