11、reactNaive对接

h5代码实现

点击查看代码

function reactNaive(name, postMessageData = {}) {
    return new Promise(resolve => {
        let data = {
            method: name,
            data: postMessageData,
            id: `${name}${new Date().getTime()}${Math.ceil(Math.random() * new Date().getTime())}`
        }

        function eventMessage(e) {
            console.log(e.data, 'RN向h5发送数据')
            let res = JSON.parse(atob(e.data));
            if(res.id == data.id) {
                window.document.removeEventListener('message', eventMessage);
                resolve(res);
            }
        }
        window.document.addEventListener('message', eventMessage);
        console.log(btoa(JSON.stringify(data)),'h5向RN发送数据')
        try {
            window.ReactNativeWebView.postMessage(btoa(JSON.stringify(data)));
        } catch(e) {
            window.postMessage(btoa(JSON.stringify(data)));
        }
    })
}

h5传给RN的为一个base64的字符串
{
    "method":"jumpapp",
    "data":{
        "url":"https://www.baidu.com"
    },
    "id":"jumpapp1608612711261"
}

method: h5要调用RN的方法
data: method方法所需要的的参数
id: RN回调h5要回传的id

例子: 
reactNaive('jumpapp', {
	url: 'https://www.baidu.com'
}).then(res => {
    
})

res为RN的回调值

RN端代码实现

点击查看代码

RN端依赖 react-native-webview & buffer

<WebView ref={webView}
             originWhitelist={['*']}
             onMessage={onMessage}
             mixedContentMode="always"
             source={{
               uri: 'h5地址'
             }}/>
// 事件监听
const onMessage = ({nativeEvent}) => {
    let res = JSON.parse(new Buffer(nativeEvent.data, 'base64').toString());
    switch(res.method) {
      case "jumpapp":
        //传给h5的数据
        let data = new Buffer(JSON.stringify({
          method: res.method,
          data: {},
          id: res.id
        })).toString('base64');
        webView.current.postMessage(data);
        break;
    }
};

nativeEvent.data: h5传给apicloud的数据为base64的字符串
res: 对象
{
	"method":"jumpapp",
	"data":{
		"url":"https://www.baidu.com"
	},
	"id":"jumpapp1608612711261"
}

data: RN回传给h5的数据
{
    method: 通知h5是那个方法的回调
    data: 回调给h5的具体数据
    id: 回调函数的唯一id
}

注意: h5和RN通信的数据为base64的字符串, 发送和接受时需要加密和解密