RN与web view的通信

RN与web view之间的通信只能传递字符串类型

流程:

1. web端向APP端请求数据

this.ReactNativeWebView = window.ReactNativeWebView;
let result = await info(this.ReactNativeWebView)
......
// info方法
info(_this){
	_this.postMessage(JSON.stringify(
        {
          type: 'info',
          data: {}
        })
     )
}

2. APP端接收到web端的请求信息,向web发送相应的数据

<WebView
	cacheEnabled={false}
    injectedJavaScript={this.state.injectJavaScript}
    onMessage={this.onHTML5Message}
    ref={webView => (this.webView = webView)}
    source={{ uri: url }}
    style={{ flex: 1 }}
/>
......
onHTML5Message = event => { 
	if (event.nativeEvent.data) {
    	let result = JSON.parse(event.nativeEvent.data);
    	swtich (result.type) {
    		case 'info':
    			this.props.getInfoActions({ // 请求数据
    				body: {
    					...
    				},
    				callback: data => {
    					this.sendToHTML({ type: result.type, data: data });
    				}
    			})
    			return;
    		default:
             	break;
    	}
    }
}
// 向web发送数据
sendToHTML = ({ type, data, showAlert }) => {
	if (data.code === 0) {
    	let rawData = JSON.stringify(data.data);
         this.webView.injectJavaScript(`reactSendMessage('{"type": "${type}","data": ${rawData}}');`);
	} else {
		this.webView.injectJavaScript(`reactSendMessage('{"type": "${type}","data": null}');`);
        }
    };

3. web端接收数据

window.reactSendMessage = this.reactSendMessage
......
reactSendMessage(data) {
	const result = JSON.parse(data);
    switch (result.type) {
    	case 'info':
        	return this.get_info(result.data) // web端处理数据
        default:
             break;
     }
},