How can I trigger action back in the react-native from my WebView?
Question
I have a component <PaymentView /> , this component display a credit card/cvc/expiry form.
It is displayed in a react-native application usingreact-native-webview .
I must trigger the form event and update the view on submit, the submit button is currently within the WebView.
- After pressing the submit
<Button />from within the webview, how can I close the WebView and display a success message? - If I can't get the webview submit event from within my component, how can I read the form within the webview from my component?
2 answers
solution1
0 2020-06-12 14:27:28
I usually have this problem when dealing with payment iframes in web applications. I think the solution is the same or a similar approach.
Check the postMessage API.
What we usually do, is emit an event on the iFrame (your webView i guess) side. Usually is a navigation event, and then we listen for that event globally in our app like:
<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>
On a fast search to react-native-webview i see that they are already using it
Hope it helps
solution2
0 2021-02-28 02:08:04
check out this
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>
);
} }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.