React Native 中 WebView 接入 Paystack 支付取消按钮无效问题求解

方案1：拦截window.close方法（最稳定，优先使用） #

你已经确认取消按钮最终会触发window.close方法，直接覆写该方法是最优解，不受页面DOM结构、按钮文案调整影响，也无需等待DOM加载完成：
首先定义注入WebView的JS代码：

const injectedJs = `
// 覆写原生window.close方法
window.close = function() {
  const resp = { event: 'cancelled' };
  window.ReactNativeWebView.postMessage(JSON.stringify(resp));
};
true; // 必填，避免WebView执行时报静默错误
`

修改WebView组件配置，直接注入上述代码即可，不需要定时器也不需要在onNavigationStateChange中重复注入：

<WebView 
  ref={webViewRef}
  source={{ uri: authorization_url }}
  injectedJavaScript={injectedJs}
  cacheEnabled={false}
  cacheMode={'LOAD_NO_CACHE'}
  onMessage={(e) => {
    const eventData = JSON.parse(e.nativeEvent?.data || '{}');
    if (eventData.event === 'cancelled') {
      console.log('支付取消事件触发');
      // 执行你的导航跳转逻辑
      navigation.navigate(callBackRoute);
    }
  }}
/>

方案2：DOM变化监听（适用于需要绑定按钮事件的场景） #

如果后续有需要针对特定按钮做绑定的场景，可以用MutationObserver替代定时器，动态监听DOM渲染，匹配到取消按钮后立刻绑定事件，无固定延时：
注入JS代码如下：

const injectedJs = `
// 初始化DOM变化监听器
const cancelObserver = new MutationObserver((mutationsList) => {
  const allButtons = document.getElementsByTagName('button');
  for (let btn of allButtons) {
    // 匹配取消按钮且未绑定过事件
    if (btn.textContent.includes('Cancel Payment') && !btn.dataset.cancelBound) {
      btn.dataset.cancelBound = 'true'; // 标记避免重复绑定
      btn.addEventListener('click', () => {
        const resp = { event: 'cancelled' };
        window.ReactNativeWebView.postMessage(JSON.stringify(resp));
      });
    }
  }
});
// 监听body下所有子节点变化
cancelObserver.observe(document.body, { childList: true, subtree: true });
true;
`

同样将上述代码赋值给WebView的injectedJavaScript属性即可正常运行。

内容的提问来源于stack exchange，提问作者Adam Katz