React Native环境下new URL无法正常获取search/searchParams的问题修复

架构老林

2026-10-25

问题根因

React Native 的运行环境（默认 JavaScriptCore、Hermes 引擎）没有内置实现完整的 WHATWG URL 标准，仅提供有限的 URL 实例属性，因此会出现浏览器控制台可正常访问 search、searchParams，RN 环境下仅能看到内部 _url 原始字符串属性的差异。

解决方案

方案1：引入 URL polyfill（推荐，和浏览器API行为完全一致）

安装对应依赖：npm install react-native-url-polyfill
在项目入口文件（一般为根目录 index.js）的最顶部引入：import 'react-native-url-polyfill/auto';
引入后原有代码无需修改，即可正常访问 urll.search，也可直接通过 urll.searchParams.get('accessToken') 提取对应参数值。

方案2：手动解析 URL（无额外依赖）

如果不想引入第三方依赖，可直接拆分 URL 字符串提取查询内容，对应修改后的测试代码如下：

const Kakao = ({navigation}) => {
  useEffect(() => {
    Linking.addEventListener('url', async ({url}) => {
      const urll = 'demo://app?accessToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6bnVsbCwicHJvdmlkZXIiOiJrYWthbyIsImlhdCI6MTYxODM5NDgwNX0.GfYs5rt0tjBrUmNvNIT6Bn_7TlJfY7zF9NxvkdqeTE0/';
      
      // 提取search字段
      const searchStr = urll.includes('?') ? `?${urll.split('?')[1]}` : '';
      console.log('urll.search', searchStr);

      // 提取查询参数
      const queryParams = {};
      searchStr.slice(1).split('&').forEach(item => {
        if (!item) return;
        const [key, value] = item.split('=');
        queryParams[decodeURIComponent(key)] = decodeURIComponent(value || '');
      });
      // 直接获取accessToken
      console.log('accessToken值', queryParams.accessToken);
    });
    return () => Linking.removeEventListener('url');
  }, []);
}