React Native WebView中Facebook登录弹窗被拦截，如何启用弹窗？

我之前也碰到过一模一样的问题！React Native的WebView默认确实不支持浏览器式的弹窗，尤其是Facebook登录这种依赖window.open()触发新窗口的场景，直接点就会白屏卡死。下面是我亲测有效的解决方法，完全能模拟Chrome等浏览器的弹窗体验：

核心原因 #

Facebook登录按钮会调用window.open()打开登录授权窗口，但React Native WebView默认没有处理这种新窗口请求的逻辑，直接触发后就会陷入白屏无响应的状态。我们需要手动拦截请求并模拟弹窗行为。

具体实现步骤 #

1. 拦截新窗口请求 #

用WebView的onShouldStartLoadWithRequest回调，识别出Facebook登录的请求并拦截，不让WebView直接加载：

import { WebView } from 'react-native-webview';
import { useState, useRef } from 'react';

const YourWebViewComponent = () => {
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [loginTargetUrl, setLoginTargetUrl] = useState('');
  const mainWebViewRef = useRef(null);

  const handleLoadRequest = (request) => {
    // 匹配Facebook登录相关的URL（可根据实际情况调整规则）
    if (request.url.includes('facebook.com/dialog/oauth') || request.url.includes('facebook.com/login')) {
      setLoginTargetUrl(request.url);
      setShowLoginModal(true);
      return false; // 阻止WebView加载这个请求
    }
    return true; // 其他请求正常加载
  };

  // ...后续代码
};

2. 用Modal嵌套WebView模拟弹窗 #

拦截到请求后，弹出一个React Native的Modal，里面嵌套一个新的WebView来加载Facebook登录页面，完美模拟浏览器弹窗：

import { Modal, View, TouchableOpacity, Text } from 'react-native';

// 接上面的组件代码
return (
  <View style={{ flex: 1 }}>
    {/* 主WebView */}
    <WebView
      ref={mainWebViewRef}
      source={{ uri: '你的目标网站URL' }}
      onShouldStartLoadWithRequest={handleLoadRequest}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      thirdPartyCookiesEnabled={true} // 必须开启，Facebook登录依赖第三方Cookie
    />

    {/* 登录弹窗Modal */}
    <Modal
      visible={showLoginModal}
      animationType="slide"
      presentationStyle="pageSheet" // iOS上模拟浏览器弹窗的样式，Android会自动适配
    >
      <View style={{ flex: 1 }}>
        {/* 关闭按钮 */}
        <TouchableOpacity
          style={{ padding: 16, backgroundColor: '#f5f5f5' }}
          onPress={() => setShowLoginModal(false)}
        >
          <Text>关闭</Text>
        </TouchableOpacity>
        {/* 登录专用WebView */}
        <WebView
          source={{ uri: loginTargetUrl }}
          onNavigationStateChange={(navState) => {
            // 监听登录完成的回调跳转
            if (navState.url.includes('你的网站登录回调URL')) {
              setShowLoginModal(false);
              // 刷新主WebView，让用户看到登录后的状态
              mainWebViewRef.current?.reload();
            }
          }}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          thirdPartyCookiesEnabled={true}
        />
      </View>
    </Modal>
  </View>
);

3. 必要的配置检查 #

• iOS：确保Info.plist中添加了App Transport Security的例外（如果你的网站或Facebook登录用了非HTTPS，不过现在基本都是HTTPS了），同时确认回调URL在LSApplicationQueriesSchemes中配置了fbauth2（Facebook登录需要）。
• Android：在AndroidManifest.xml中添加网络权限：<uses-permission android:name="android.permission.INTERNET" />，并确保回调URL在允许的域名列表内。

内容的提问来源于stack exchange，提问作者Günter Gotha