我正在使用 React Native 构建一个应用程序,我正在尝试使用
paystack
实现支付系统。其实我想用webview来显示pagstack支付网关。
一切正常,直到我测试了不起作用的
cancel
按钮。我不得不使用 injectjavascript
方法来监听点击事件并务实地将用户导航到被拒绝的屏幕。现在的问题是这段代码使用了 javascript setTimeout
。这是因为 paystack 首先挂载一个 loading 状态。所以,setTimeOut
被用来延迟脚本 3 秒。
我不喜欢这个。如果加载时间比这长得多怎么办?
我已经尝试了window.load
和其他一些建议,但它不起作用。该脚本会立即运行 paystack 加载状态已安装。此时,span
等文档元素尚未加载。这是代码:
const handleCancleScript = `
setTimeout(function() {
const buttons = document.getElementsByClassName("text")
for(let button of buttons){
const resp = button.textContent
if(resp == "Cancel Payment"){
button.addEventListener("click", function() {
var response = {event:'cancelled'};
window.ReactNativeWebView.postMessage(JSON.stringify(response))
});
}
}
}, 3000);
true;
`
网络视图:
<WebView
javaScriptEnabled={true}
source={{ uri: paymentData }}
style={{ marginTop: 50 }}
onNavigationStateChange={ handleNav }
cacheEnabled={false}
cacheMode={'LOAD_NO_CACHE'}
javaScriptEnabledAndroid={true}
ref={webView}
onMessage={(e) => {
messageReceived(e?.nativeEvent?.data);
}}
/>
真的有办法阻止这个脚本在 paystack 加载状态完成之前运行吗?当我检查浏览器上的 html 元素时,我意识到 paystack 正在使用加载状态。