如何解决如何在 React Native webview 中使用 PostMessage?
我正在尝试将 postmessage 用于在 React Native 应用程序内的 web 视图中打开的页面。试了很多次,还是发不出去。
我可以正常收听网页消息。我就是无法寄回任何东西。
我目前正在使用 react-native-webview 11.6.5
export default function WebPage() {
const webviewRef = useRef();
const onMessage = (event) => {
//receive message from the web page. working here until here
const data = JSON.parse(event.nativeEvent.data);
//reply the message
webviewRef.current.postMessage(
JSON.stringify({reply: 'reply'}),'*'
)
}
return <View>
<WebView
ref={webviewRef}
originWhitelist={['*']}
source={{ uri: 'https://robertnyman.com/html5/postMessage/postMessage.html' }}
domStorageEnabled
javaScriptEnabled
onMessage={onMessage}
/>
</View>
}
知道我做错了什么吗?
更新:
感谢@Ahmed Gaber 的帮助,我找到了这个问题 https://github.com/react-native-webview/react-native-webview/issues/809 并发现他们正在将 postMessage
更改为 injectJavaScript
。
const onMessage = (event) => {
const data = JSON.parse(event.nativeEvent.data);
//reply the message
webviewRef.current.injectJavaScript(
`window.postMessage(
{
reply: 'reply'
}
);`
)
}
解决方法
将数据从应用发送到 const
subjects = [ {name:"math"},{name:"sports"},{name:"math"},{name:"art"} ],subjectdates = [ {name:"math",year:2017},{name:"sports",year:2018},{name:"math",year:2019},{name:"art",year:2020} ];
const subjectDatesMap = subjectdates.reduce((map,item) =>
map.set(
item.name,[...(map.get(item.name) || []),item]
),new Map);
const addDates = subjects.map(classes => ({
subject: classes,end_subject_date: (subjectDatesMap.get(classes.name) || []).shift()
}));
console.log(addDates);
使用 injectedJavaScript
将数据从 webview
发送到应用使用 postMessage
在 webview
中接收由 webview
发送的数据数据,使用 onMessage
postMessage
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。