依據(jù)

在webview內(nèi)部的網(wǎng)頁中調(diào)用window.postMessage方法時(shí)可以觸發(fā)此屬性對(duì)應(yīng)的函數(shù)，從而實(shí)現(xiàn)網(wǎng)頁和RN之間的數(shù)據(jù)交換。 設(shè)置此屬性的同時(shí)會(huì)在webview中注入一個(gè)postMessage的全局函數(shù)并覆蓋可能已經(jīng)存在的同名實(shí)現(xiàn)。

網(wǎng)頁端的window.postMessage只發(fā)送一個(gè)參數(shù)data，此參數(shù)封裝在RN端的event對(duì)象中，即event.nativeEvent.data。data 只能是一個(gè)字符串。
在React Native 0.37版本中，合并入了react-native-webview-bridge作者的某個(gè)PR，從此React Native中自帶的WebView擁有了和Web通信的功能。此版本之前的版本也可以用react-native-webview-bridge或者其他WebView Bridge的方案進(jìn)行通信。

所需工具

• react-native版本>=0.37(必須)
• react-native-document-picker(用于調(diào)用系統(tǒng)文件選擇框)
• react-native-fs(把文件轉(zhuǎn)為base64字符串)

步驟

1. 安裝react-native-document-picker和react-native-fs

npm install react-native-fs --save
npm i --save react-native-document-picker
react-native link

2. web端

//第一步
       $(element).click(function () {
            var $fileName = $(element).attr('fileName');
            var $fileId = $(element).attr('fileId');
            var jsonObj = {};//構(gòu)造與react-native端通信的對(duì)象
            jsonObj.type = 'file';
            jsonObj.id = $fileId;
            jsonObj.name=$fileName;
            var jsonString = JSON.stringify(jsonObj);
            window.postMessage(jsonString,'*');
           //主要:window.postMessage()
        });    
//第二步
    window.document.addEventListener('message',function (e) {
        //接收從react-native端返回的數(shù)據(jù),并進(jìn)行處理
        //e.data則是react-native返回的數(shù)據(jù)
        
        }

3. react-native端

   onMessageChange(event) {
        let messageString = event.nativeEvent.data;
        let obj = JSON.parse(messageString)
        if (obj.type == 'file') {
            //調(diào)用文件選擇框，打開系統(tǒng)文件選擇
            DocumentPicker.show({
                filetype: [DocumentPickerUtil.allFiles()],
            }, (error, res) => {
                console.log(res);
                if (res != null) {
                    let filePath = res.uri;
                    let fileType = res.type;
                    let fileName = res.fileName;
                    let fileSize = res.fileSize;
                    //把文件轉(zhuǎn)換成base64字符串
                    RNFetchBlob.fs.readFile(filePath, 'base64')
                        .then((data) => {
                            console.log(data);
                            let message = {};
                            message.command = 'file';
                            message.fileName = fileName;
                            message.fileType = fileType;
                            message.id = obj.id;
                            message.name = obj.name;
                            message.playload = { uri: data };
         let messageString = JSON.stringify(message);
         //webview像web端傳遞數(shù)據(jù)
            this.webview.postMessage(messageString);
                        });

                }
            });
        }
    }