Expo Bare Workflow安卓使用Auth Session报WebBrowser已打开错误

核心原因 #

该报错并不是由嵌套WebView导致，绝大多数情况下是安卓端事件触发机制、配置引用不稳定或Expo模块版本不匹配导致的浏览器实例重复调用，库冲突为低概率诱因，可按以下顺序排查修复：

修复步骤 #

1. 新增点击防重与浏览器残留兜底 #

安卓端Touchable类组件存在事件透传、重复触发的特性，且如果上一次浏览器实例未正常销毁，会直接触发该报错，在触发登录前先清理残留实例、加点击锁即可解决90%以上的该类问题。
修改后的组件代码示例：

import { useMemo, useState, useCallback } from 'react';
import * as WebBrowser from 'expo-web-browser';

const GoogleAuthBtn = (props) => {
  // 固定配置引用，避免useAuthRequest重复初始化
  const stableGoogleAuth = useMemo(() => googleAuth, []);
  const [request, response, onAuthPressRaw] = Google.useAuthRequest(stableGoogleAuth);
  // 点击状态锁，防止重复触发
  const [isAuthing, setIsAuthing] = useState(false);

  const handlePress = useCallback(async () => {
    if (isAuthing || !request) return;
    setIsAuthing(true);
    // 兜底关闭可能残留的浏览器实例
    await WebBrowser.dismissBrowser();
    try {
      await onAuthPressRaw();
    } catch (e) {
      console.warn('登录触发失败', e);
    } finally {
      setTimeout(() => setIsAuthing(false), 1500);
    }
  }, [isAuthing, request, onAuthPressRaw]);

  useEffect(() => {
    if (response && typeof props.onAuthenticate === "function") {
      props.onAuthenticate(response, "Google");
      setIsAuthing(false);
    }
  }, [response]);

  return (
    <AuthButton
      styles={[MainStyles.loginButton, isAuthing && {opacity: 0.6}]}
      icon={<SocialIcon light raised={false} type="google" />}
      onPress={handlePress}
      buttonText={isAuthing ? "登录中..." : "Sign In with Google"}
      disabled={isAuthing}
    />
  );
};

Facebook登录组件也做相同修改即可。

2. 检查安卓原生配置与模块版本 #

• 确认android/app/src/main/AndroidManifest.xml中已经添加了你的Auth Session回调scheme对应的intent-filter，否则浏览器实例完成授权后不会正常销毁
• 执行npx expo install expo-web-browser expo-auth-session确保两个模块的版本和你当前Expo SDK版本匹配，不要手动安装跨大版本的模块

3. 排查库冲突 #

如果以上步骤都无效，再检查是否存在多版本依赖：

• 执行npm ls expo-web-browser（或yarn等价命令），如果输出中有多个版本的expo-web-browser，说明存在依赖冲突，在package.json中添加resolutions字段强制统一版本即可：

"resolutions": {
  "expo-web-browser": "你的Expo SDK对应的官方版本号"
}

内容的提问来源于stack exchange，提问作者Steven Matthews