我如何在react中触发动作--从我的WebView中返回本机？
我如何在react中触发动作--从我的WebView中返回本机？
提问于 2020-06-12 14:10:18
我有一个组件<PaymentView />，这个组件显示一个信用卡/cvc/到期表。
它在使用react-native-webview的反应本机应用程序中显示。
我必须触发表单事件并更新提交视图，提交按钮当前在WebView中。
- 在and视图中按下提交
<Button />后，如何关闭webview并显示成功消息？ - 如果无法从组件中获取webview提交事件，如何从组件中读取webview中的表单？
回答 2
Stack Overflow用户
发布于 2020-06-12 14:27:28
在web应用程序中处理付款时，我通常会遇到这个问题。我认为解决办法是相同的或类似的方法。
检查postMessage API。
我们通常做的是在iFrame (我猜是您的webView )端发出一个事件。通常是导航事件，然后我们在应用程序中全局地监听该事件，例如：
<script>
var defaultResponse = {
status: 0,
code: '',
message: ''
}
function queryParamsToObject(search = '') {
return search ? JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g, '":"') + '"}') : ''
}
function getResponseObject() {
return queryParamsToObject(decodeURI(location.search).substring(1))
}
var response = getResponseObject()
console.log('window:child', window.parent, response)
try {
window.parent.postMessage(response, '*')
} catch (e) {
console.log('window:child:send:error', e)
}
</script>在快速搜索react-native-webview时，我发现它们已经是使用它了
希望它能帮上忙
Stack Overflow用户
发布于 2021-02-28 02:08:04
看看这个
render() {
const html = `
<html>
<head></head>
<body>
<script>
setTimeout(function () {
window.ReactNativeWebView.postMessage("Hello!")
}, 2000)
</script>
</body>
</html>
`;
return (
<View style={{ flex: 1 }}>
<WebView
source={{ html }}
onMessage={event => {
alert(event.nativeEvent.data);
}}
/>
</View>
);}}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62346035
复制相关文章
相似问题
腾讯云开发者
