RN Expo Web Browser特定URL自动关闭功能失效问题

问题根源 #

1. URL缺少协议头：你使用的wwww.example.com/test没有添加https://前缀，Expo的WebBrowser和Linking模块无法正确识别这类URL，会导致后续导航逻辑异常。
2. 错误的事件监听逻辑：Linking.addEventListener("url")是用来监听外部唤起应用的Deep Link事件，网页内部的跳转（比如从test页到success页）不会触发该事件，自然无法触发关闭浏览器的操作。

修正后的代码 #

import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';
import * as WebBrowser from 'expo-web-browser';

export const WebVerification = () => {
  const [redirectData, setRedirectData] = useState(null);

  const _openBrowserAsync = async () => {
    try {
      await WebBrowser.openBrowserAsync('https://wwww.example.com/test', {
        // 监听网页导航状态变化
        onNavigationStateChange: (state) => {
          // 匹配目标跳转URL时关闭浏览器
          if (state.url === 'https://wwww.example.com/success') {
            WebBrowser.dismissBrowser();
            setRedirectData(state.url);
          }
        }
      });
    } catch (error) {
      alert(error);
      console.error(error);
    }
  };

  const _maybeRenderRedirectData = () => {
    if (!redirectData) return null;

    return (
      <Text style={{ marginTop: 30 }}>
        跳转完成: {redirectData}
      </Text>
    );
  };

  return (
    <View style={{ padding: 20 }}>
      <Text>Redirect Example</Text>
      <Button onPress={_openBrowserAsync} title="Open Browser" />
      {_maybeRenderRedirectData()}
    </View>
  );
};

关键修改说明 #

• 补全URL协议头：给所有访问地址添加https://，确保WebBrowser正确加载和识别网页。
• 替换监听方式：使用WebBrowser自带的onNavigationStateChange回调，实时捕获网页的导航状态变化，一旦检测到目标success页面，立即关闭浏览器。
• 移除无用代码：删除原本的Linking事件监听逻辑，因为该场景下不需要处理外部唤起应用的Deep Link。
• 优化错误日志：将普通日志改为console.error，便于调试时快速定位问题。

额外注意事项 #

• 确保后端重定向后的success页面完整URL（含协议）与代码中判断的字符串完全一致。
• iOS预览环境中，确认Expo Go拥有访问该HTTPS地址的网络权限，避免权限问题导致导航监听失效。

内容的提问来源于stack exchange，提问作者Alexander Thomsen