react-native 通過 WebView 組件可以非常簡單的實(shí)現(xiàn)通信，這里通過從RN中分離出來的react-native-webview 為例，介紹 WebView 的通信機(jī)制。

react-native-webview 與 web 通信，提供以下3個方法

• React Native -> Web: injectedJavaScript 屬性
• React Native -> Web: injectJavaScript 方法（this.refs.webviewr.injectJavaScript(...)）
• Web -> React Native: onMessage 屬性回調(diào)， web調(diào)用window.ReactNativeWebView.postMessage

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

export default class App extends Component {
  render() {
    const injectedJavaScriptCode = `document.body.style.backgroundColor = 'red';`
    
    setTimeout(() => {
      // rn 注入調(diào)用（執(zhí)行） web的 window.alert 方法
      this.webref.injectJavaScript(`window.alert('hello')`);
    }, 3000);
    
    return (
      <View style={{ flex: 1 }}>
        <WebView
          ref={r => (this.webref = r)}
          source={{
            uri: 'https://xxx.com/index.html'
          }}
          // 向web注入js代碼
          injectedJavaScript={injectedJavaScriptCode} 
          // 監(jiān)聽web發(fā)送過來的消息
          onMessage={event => {
            alert(event.nativeEvent.data);
          }}
        />
      </View>
    );
  }
}

可以看出，WebView 與 Web 通信非常簡單，但卻是單向的：WebView 可以觸發(fā) Web的方法（一般為全局window下的），Web 也可以發(fā)送消息/數(shù)據(jù)到 WebView。

如果 Web 想要獲取 app 內(nèi)的的數(shù)據(jù)（甚至攜帶一些參數(shù)），得到一個返回/響應(yīng)，WebView 如何將這個返回值響應(yīng)給 Web？

// web code
getAppVersion('ios', (version) => alert(version))

我們可能會在打開webview時 注入一些初始化的js代碼和數(shù)據(jù)，但這肯定無法滿足 web 在使用期間需要獲取app數(shù)據(jù)。

// web code
window.initDataFromApp = (data) => { /**do something **/}

// RN code
<WebView
    injectedJavaScript={`initDataFromApp && initDataFromApp(${JSON.stringify(data)});`}
    />

要實(shí)現(xiàn) RN -> web 或 web -> RN 有響應(yīng)的通信，通過webview提供的三個基本方法，我們可以自己封裝一套通信回調(diào)的機(jī)制。

直接上代碼

/***
 * postJsCode.js 
 * 預(yù)注入webview javascript code
 * web端使用：
 * window.APP.invokeClientMethod('getList', { page: 1 , size: 10}, callback);
 * * */
function clientMethod() {
    var APP = {
        __GLOBAL_FUNC_INDEX__: 0,
        invokeClientMethod: function (type, params, callback) {
            var callbackName;
            if (typeof callback === 'function') {
                callbackName = '__CALLBACK__' + (APP.__GLOBAL_FUNC_INDEX__++);
                APP[callbackName] = callback;
            }
            window.ReactNativeWebView.postMessage(JSON.stringify({type, params, callback: callbackName }));
        },
        invokeWebMethod: function (callback, args) {
            if (typeof callback==='string') {
                var func = APP[callback];
                if (typeof func === 'function') {
                    setTimeout(function () {
                        func.call(this, args);
                    }, 0);
                }
            }
        },
    };
    window.APP = APP;
    window.webviewCallback = function(data) {
        window.APP['invokeWebMethod'](data.callback, data.args);
    };
}

WebViewScreen.js

import React, { Component } from 'react';
import { SafeAreaView, Platform } from 'react-native';
import { WebView } from 'react-native-webview';
import clientMethod from './postJsCode';
const patchPostMessageJsCode = `(${String(clientMethod)})(); true;`;

export default class WebViewScreen extends Component {  
    webref = null;
    /***
     * 接收web發(fā)送過來的消息，調(diào)用rn中提供的方法
     */
    onMessage = event => {
        var data = JSON.parse(event.nativeEvent.data);
        if (!data) {
            return;
        }
        const { type, params, callback } = data;
        switch (type) {
        case 'getUser':
            const json = {
                callback,
                args: {
                    name: '王者榮耀',
                    age: 29,
                }
            };
            this.webref.injectJavaScript(`webviewCallback(${JSON.stringify(json)})`);
            break;

        // 導(dǎo)航到 app 指定 screen/page
        case 'navigate':
            const { screen } = params;
            this.props.navigation.navigate(screen);
            break;
        }

    }

    render() {
        return (
            <SafeAreaView style={{ flex: 1, }}>
                <WebView
                    onMessage={this.onMessage}
                    ref={r => (this.webref = r)}
                    injectedJavaScript={patchPostMessageJsCode}
                    source={{ uri: 'https://xxx.com/index.html' }}
                />
            </SafeAreaView>
        );
    }
}

這里主要預(yù)定義了type, params, callback 參數(shù)，在web中使用： window.APP.invokeClientMethod(type, params, callback), type 在 RN的 onMessage 處理對應(yīng) case。

其原理步驟是：

• web 調(diào)用 invokeClientMethod方法，將回調(diào) callback 放入 APP對象的屬性上：window.APP['__GLOBAL_FUNC_INDEX__0'] = callback
• 然后web再真正發(fā)起 postMessage（JSON.string）到RN
• RN 的 onMessage 接收到 event（JSON.parse）
• RN 處理完后，通過 this.webref.injectJavaScript 觸發(fā)調(diào)用 放在全局的 window.APP['__GLOBAL_FUNC_INDEX__0']回調(diào)

由于Javascript是單線程執(zhí)行的，__GLOBAL_FUNC_INDEX__ 屬性可以確保唯一，所以即使在并發(fā)調(diào)用時時，也可以正?；卣{(diào)。

注意，injectedJavaScript 屬性 注入時機(jī)在ios和android表現(xiàn)不一樣，在ios上 注入代碼頁面打開馬上可以得到，然而在android 上是延遲被注入的，（像是在頁面加載完后在尾部引入Script腳本，沒有深入研究了），所以在web開發(fā)中 組件 mounted 時 務(wù)必要等待 injectedJavaScript 注入完成才做響應(yīng)處理。

早期RN版本，是web直接調(diào)用window.postMessage通信的， 設(shè)置onMessage的同時會在webview中注入一個postMessage的全局函數(shù)并覆蓋可能已經(jīng)存在的同名實(shí)現(xiàn)?？赡苄枰獙eb原生postMessage做個兼容。然后我們可以在web中 監(jiān)聽 onMessage 觸發(fā)回調(diào)（或者在組件掛載期間監(jiān)聽message）

function patchPostMessageFunction(){
    const originalPostMessage = window.postMessage;
    const patchedPostMessage = (message, targetOrigin, transfer) => {
        originalPostMessage(message, targetOrigin, transfer);
    };
    patchedPostMessage.toString = () => String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
    window.postMessage = patchedPostMessage;
    if(window.APP) {
        window.document.addEventListener('message', function (e) {
            const callbackObj = JSON.parse(e.data);
            window.APP['invokeWebMethod'](callbackObj.callback, callbackObj.args);
        });   
    }
}