window. reactativewebview . postmessage不能在React JS中从webview传

Question

我有一个Web应用程序在React JS这是托管在netflix。在React Native中使用WebViews嵌入了同样的功能。我想把数据从React JS传递到React Native.

我在React JS中尝试了window.ReactNativeWebView.postMessage("hello")，但onMessage没有在React Native Webview中被调用。

React JS Code -

await window.ReactNativeWebView.postMessage("Hello!");

React Native Code -

return (
<View style={styles.container}>
<WebView
source={{ uri: 'hosted netlify link' }}
ref={webViewRef}
onMessage={(event) =>
{ 
console.log("INSIDE ON MESSAGE"); 
alert(event.nativeEvent.data); }
}
style={styles.view}
originWhitelist={['*']}
allowsInlineMediaPlayback
javaScriptEnabled={true}
scalesPageToFit
mediaPlaybackRequiresUserAction={false}
javaScriptEnabledAndroid
useWebkit
startInLoadingState={true}
renderLoading={Spinner}
geolocationEnabled={true}
/>
</View>
);

请帮助我将数据从React JS传递到React Native。

提前谢谢你。

Answer 1

我为此挣扎了一段时间，这里是一个解决我问题的工作解决方案。

在你的React JS端添加以下代码来将消息发布到React Native:

window["ReactNativeWebView"] && window["ReactNativeWebView"].postMessage(JSON.stringify({"key": "value"})). 

请注意，您只能传递一个字符串论点。

Answer 2

请检查下面的代码:

React JS代码:

window.ReactNativeWebView.postMessage(JSON.stringify({ message: "your message" , data: "your data"}));

React-native代码:

function handleVideoEvents(event) {
let eventObj = JSON.parse(event.nativeEvent.data)
let message = eventObj.message
let data = eventObj.data
console.log('message :', message)
console.log('data :', data)
}
return (
<View style={styles.container}>
<WebView
source={{ uri: 'hosted netlify link' }}
ref={webViewRef}
onMessage={event => handleVideoEvents(event)}
style={styles.view}
originWhitelist={['*']}
allowsInlineMediaPlayback
javaScriptEnabled={true}
scalesPageToFit
mediaPlaybackRequiresUserAction={false}
javaScriptEnabledAndroid
useWebkit
startInLoadingState={true}
renderLoading={Spinner}
geolocationEnabled={true}
/>
</View>
);