React Native中如何从CustomTabs获取当前URL并自动关闭？

这个需求其实可以通过**Deep Link（自定义URL Scheme）**来实现，核心思路是让表单提交后的重定向页面唤起你的React Native App，同时把参数带回来，CustomTabs会在App唤起后自动退到后台（Android端可以主动关闭）。下面是具体的实现步骤：

1. 配置App的Deep Link（自定义URL Scheme） #

首先需要给你的App设置一个专属的URL Scheme，比如yourapp://，这样外部网页可以通过这个Scheme唤起你的App并传递参数。

Android 配置 #

在android/app/src/main/AndroidManifest.xml的主Activity标签内添加以下intent-filter：

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <!-- 替换成你的自定义Scheme -->
  <data android:scheme="yourapp" />
</intent-filter>

iOS 配置 #

在ios/[你的App名称]/Info.plist中添加以下配置：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <!-- 替换成你的自定义Scheme -->
      <string>yourapp</string>
    </array>
  </dict>
</array>

2. 修改表单的重定向逻辑 #

需要让https://www.demo.com的表单提交后，重定向到一个能唤起你App的地址。有两种方式：

• 后端直接重定向：在表单处理的后端服务中，将提交后的跳转地址设置为yourapp://handleResult?param1=xxx&param2=yyy（把需要的参数拼在后面）。
• 前端网页跳转：如果后端无法修改，可以在原重定向页面（比如https://www.demo.com/result）添加一段JS代码，自动跳转到你的App Scheme：

<script>
  // 获取当前页面的URL参数
  const urlParams = new URLSearchParams(window.location.search);
  const targetParam = urlParams.get('你的参数名');
  // 跳转到App的Deep Link，携带参数
  window.location.href = `yourapp://handleResult?param=${targetParam}`;
</script>

3. 在React Native中监听Deep Link并处理参数 #

使用React Native自带的Linking API监听App被唤起的事件，解析参数并关闭CustomTabs：

import { Linking, Platform, useEffect } from 'react-native';
import CustomTabs from 'react-native-custom-tabs';
// 假设你用了ANIMATIONS_SLIDE，记得导入对应的动画配置
import { ANIMATIONS_SLIDE } from 'react-native-custom-tabs';

export default function YourScreen() {
  // 初始化时监听Deep Link事件
  useEffect(() => {
    // 处理App启动时的初始Deep Link
    Linking.getInitialURL().then(handleDeepLink);
    
    // 监听后续的Deep Link唤起事件
    const linkSubscription = Linking.addEventListener('url', (event) => {
      handleDeepLink(event.url);
    });

    // 组件卸载时移除监听
    return () => linkSubscription.remove();
  }, []);

  // 处理Deep Link的核心逻辑
  const handleDeepLink = (url) => {
    if (!url) return;

    // 校验是否是我们的回调地址
    if (url.startsWith('yourapp://handleResult')) {
      // 解析URL中的参数
      const paramString = url.split('?')[1];
      const params = new URLSearchParams(paramString);
      const targetParam = params.get('param'); // 替换成你的参数名
      
      // 这里可以把参数存入状态、发送到后端，或者做其他业务处理
      console.log('从CustomTabs获取到的参数:', targetParam);

      // Android端主动关闭CustomTabs（iOS端唤起App后Tabs会自动关闭）
      if (Platform.OS === 'android') {
        CustomTabs.close(); // 确认你的react-native-custom-tabs版本支持此方法
      }
    }
  };

  // 打开CustomTabs的方法
  const openCustomTab = async () => {
    const url = 'https://www.demo.com';
    try {
      const launched = await CustomTabs.openURL(url, {
        toolbarColor: '#607D8B',
        enableUrlBarHiding: true,
        showPageTitle: true,
        enableDefaultShare: true,
        animations: ANIMATIONS_SLIDE
      });
      console.log(`Launched custom tabs: ${launched}`);
    } catch (err) {
      console.error(err);
    }
  };

  // 页面渲染部分（省略）
  return <></>;
}

注意事项 #

• 确保你的react-native-custom-tabs版本支持close()方法（最新版本基本都支持，若不支持可以升级库）。
• iOS上通过Deep Link唤起App时，CustomTabs会自动退到后台，无需额外调用关闭方法。
• 测试Deep Link是否生效：可以用命令npx uri-scheme open yourapp://handleResult?param=test --android（Android）或在iOS模拟器中手动输入Scheme地址。

内容的提问来源于stack exchange，提问作者kiranb ghrix