React 本机 expo Web 视图组件未打开弹出网页

Question

我正在尝试在我的 React 本机应用程序中使用支付网关，并且我正在使用

WebView

组件在我的应用程序中呈现支付网关。在我的常规浏览器中，随着付款过程，会显示一个弹出网页以进行 OTP 确认，我的应用程序中

WebView

的问题是它没有打开此弹出网页。

这是我的组件：

<WebView
    source={{uri:paymentUrl}}
    onNavigationStateChange={handleNavigationChange}
    style={{height:Dimensions.get('screen').height/9.5, width:'100%'}}
/>

这是

onNavigationStateChange

函数（它不起作用，因此当弹出消息应该打开时不返回任何内容）：

    const handleNavigationChange = navState => {
        const {url} = navState;
        // Handle navigation changes such as pop-ups or redirects here
        if (url.includes('otp-confirmation')) {
          // Example of handling OTP confirmation
          Alert.alert('OTP Confirmation', 'Handling OTP confirmation here.');
        }
        if(navState.url.split('/')[4] === 'furl'){
            setPaymentUrl('');
            setSnackbarMessage('Payment Failed, Please Try Again.');
            setVisible(true);
        }else if(navState.url.split('/')[4] === 'surl'){
            submitHandler();
            setPaymentUrl('');
            setSnackbarMessage('Paid Successfully!');
            setVisible(true);
        }else if(navState.url.includes('otp-page-url')){
            setWebViewUrl(navState.url);
        }
    };

我尝试了

onNavigationStateChange

尝试捕获这个弹出网页链接并在另一个

WebView

中打开它，但是尝试打开另一个页面绝对没有任何响应。

Answer 1

我相信您正在寻找的活动是

onOpenWindow

，但您可能想看看

javaScriptCanOpenWindowsAutomatically

和

setSupportMultipleWindows

<WebView
  ...
  javaScriptCanOpenWindowsAutomatically={true}
  onOpenWindow={(syntheticEvent) => {
    const { nativeEvent } = syntheticEvent;
    const { targetUrl } = nativeEvent
    console.log('Intercepted OpenWindow for', targetUrl)
    console.log(nativeEvent);
  }}
  setSupportMultipleWindows={true}
/>

您需要创建一个新的 Web 视图来模拟弹出窗口，或者遵循当前 Web 视图中的 URL。

我希望这有帮助！