如何解决未触发 React Native WebView onMessage()
我在 S3 上托管了一个静态站点,上面有 CloudFront 发行版。
<WebView
ref={webViewRef}
scrollEnabled={false}
source={{ uri: Config.REMOTE_URL }} // CloudFront URL
sharedCookiesEnabled={true}
onMessage={(event) => receivedMessageFromWebView(event.nativeEvent.data)}
/>
我们postMessage()
上网的方式是这样的
const sendDataToWebView = (dataMap: any) => {
const dataToPost = { type: 'data',data: dataMap };
const postMessageJSCode = `
window.postMessage(${JSON.stringify(dataToPost)},"*");
true;
`;
if (webViewRef && webViewRef.current) {
webViewRef.current.injectJavaScript(postMessageJSCode);
}
}
onMessage
实现如下
const receivedMessageFromWebView = (msgData: any) => {
console.log('Data Received from WebView -->',msgData); // <-- Not working
};
我在这里遗漏了什么?
- 反应:17.0.2
- ReactNative:0.64.2
- Web 视图:11.6.5
解决方法
与其window.postMessage
不如尝试window.ReactNativeWebView.postMessage
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#onmessage
或者文档已经是本地和 webview 之间通信的真正细节:https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。