如何在基于 Expo 的移动应用中构建自定义深度链接

...

// 解析深度链接并获取 hostname 和 queryParams 的函数
function parseSwapDeeplink(url: string): SwapDeeplinkParams | null {
  try {
    const { hostname, queryParams } = Linking.parse(url);
    
    if (hostname !== 'swap' || !queryParams) {
      return null;
    }

    return {
      from: queryParams.from as string | undefined,
      to: queryParams.to as string | undefined,
      amount: queryParams.amount as string | undefined,
    };
  } catch (error) {
    console.error('Error parsing deeplink:', error);
    return null;
  }
}

function DeeplinkHandler({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  
  useEffect(() => {
    
    const handleDeeplink = (url: string) => {
      // 解析深度链接并获取参数(host、path、params 等...)
      const params = parseSwapDeeplink(url);
      if (params) {
        // 此示例在应用中将 params 设为全局可访问,不过您可以使用 React Context 或类似方式让 params 在应用中的任何地方都能访问。
        (global as any).swapDeeplinkParams = params;
        // 根据 path 或 host,您可以将用户重定向到应用中相应的屏幕 
        router.replace('/');
      }
    };

    // 处理初始 URL
    Linking.getInitialURL().then(url => url && handleDeeplink(url));

    // 创建事件监听器,处理应用打开期间的 URL 变化
    const subscription = Linking.addEventListener('url', event => handleDeeplink(event.url));

    // 组件销毁时移除事件监听器(避免内存泄漏)
    return () => subscription.remove();
  }, [router]);

  return <>{children}</>;
}


export default function Layout() {
    ...

    return (
        <DeeplinkHandler>
            <App />
        </DeeplinkHandler>
    );
 }