通过webview实现app和h5之间的传值

我这的app是react-native项目，h5是react项目，

<WebView 
      style={{flex:1,width}}
      source={{uri: 'url'}}  //这里的url是h5的url
      // scrollEnabled={false} 
      // javaScriptEnabled={true}
      // injectedJavaScript={}
      ref='webview'
      onLoadEnd={() => {
        // this.refs.webView.postMessage('RN向H5发送的消息');
      }}
      onMessage={(event) => {
        console.log(event.nativeEvent.data)
      }}
/>
<TouchableOpacity style={{height: 44, alignItems:'center'}} onPress={this.qiehuan}>
    <Text>切换</Text>
</TouchableOpacity>

一、rn->h5
1、rn 发送

qiehuan = ()=>{
		this.refs.webview.postMessage('RN向H5发送的消息');
	}

2、h5 接收

onReceiveMessage =  (event) => {
			alert(event.data)
			this.setState({event:event.data})
			console.log(event.data)
		};
		componentWillUnmount() {
			window.removeEventListener('message', this.onReceiveMessage)
		}
		componentDidMount() {
			window.addEventListener('message', this.onReceiveMessage, false);
		}

二、h5->RN
1、h5发送

postMessage = ()=>{
		if(window.ReactNativeWebView){
			window.ReactNativeWebView.postMessage('网页向rn发送的消息');
		}
	}

2、rn接收

onMessage={(event) => {
    console.log(event.nativeEvent.data)
}}

当时做的时候也是遇到了很多问题，找人请教了之后才成功的，现在和大家分享一下，希望对大家有所帮助。