监听webview动作以实现RN中的paystack

Question

我试图在webview中运行paystack，但是它有一个名为取消支付的按钮，不做任何事情。我被告知该按钮运行一个名为onClose的函数，该函数运行window。接近，但由于它在webview中不起作用。

现在我正试图钩入该函数，理想情况下，使一个导航动作，但现在只是一个console.log或警报就足够了。

这是webview现在的样子

<WebView 
source={{ uri: authorization_url }}
onNavigationStateChange={() => console.log('navstate changed')}
cacheEnabled={false}
cacheMode={'LOAD_NO_CACHE'}
onMessage={(e) => {
console.log('pressed')
JSON.parse(e.nativeEvent?.data);
}}
onClose={() => {
console.log('on close')
navigation.navigate(callBackRoute)
}}
/>

我想添加injectedJavaScript道具，但我不知道该放什么进去，我已经尝试了很多东西，到目前为止没有任何成功。

下面是payfast文档的链接https://paystack.com/docs/guides/using_the_paystack_checkout_in_a_mobile_webview/

更新:我得到了这个超时破解工作，肯定更愿意找到一种方法来删除超时，只是使其正常工作，但以下代码是功能性的

const js = `
setTimeout(function() {
var buttons = document.getElementsByTagName('button')
buttons.forEach((button) => {
if(button.innerHTML.includes('Cancel Payment')) {
button.addEventListener("click", function() {  
var resp = {event:'cancelled'};
window.ReactNativeWebView.postMessage(JSON.stringify(resp))
});
}
})
}, 3000);
true; // note: this is required, or you'll sometimes get silent failures
`

和

const onNavigationStateChange = state => {
const { url } = state;
webViewRef.current.injectJavaScript(js)
// other navigationStateChangeCode
}

Answer 1

您可以尝试使用窗口。Onload事件，在文档加载完成后触发，而不是设置超时。

function onButtonClick() {
var resp = {event:'cancelled'};
window.ReactNativeWebView.postMessage(JSON.stringify(resp))
}
window.onload = function() {
var buttons = document.getElementsByTagName('button');
buttons.forEach((button) => {
if(button.innerHTML.includes('Cancel Payment')) {
button.addEventListener("click", onButtonClick);
}
})
}