如何实现短信发送可唤起React Native Expo应用的智能跳转链接？

针对你需要的「已装APP唤起、未装跳应用商店」的智能跳转需求，在Expo托管工作流里可以用以下简便方案实现：

1. 配置APP的深度链接能力 #

先在app.json里配置自定义Scheme和Universal Links/App Links，这是唤起APP的基础：

{
  "expo": {
    "scheme": "yourapp", // 自定义唤起协议，比如你的APP名称缩写
    "ios": {
      "bundleIdentifier": "com.yourapp.official", // 你的iOS包名
      "associatedDomains": ["applinks:your-domain.com"] // 绑定用于Universal Link的域名
    },
    "android": {
      "package": "com.yourapp.official", // 你的安卓包名
      "intentFilters": [
        {
          "action": "VIEW",
          "data": [
            {
              "scheme": "https",
              "host": "your-domain.com",
              "pathPrefix": "/invite"
            },
            {
              "scheme": "yourapp"
            }
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        }
      ]
    }
  }
}

2. 搭建静态跳转中转页 #

因为直接用Scheme唤起APP，未安装时会出现错误提示，所以需要一个简单的静态网页做中转判断。可以把这个页面部署到Vercel、Netlify这类免费静态托管平台，或者你自己的服务器：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>加入XX应用</title>
  <script>
    // 从URL获取邀请码
    const inviteCode = new URLSearchParams(window.location.search).get('code');
    // 替换成你的应用商店链接
    const iosStoreUrl = 'https://apps.apple.com/cn/app/你的应用名称/id123456789';
    const androidStoreUrl = 'https://play.google.com/store/apps/details?id=com.yourapp.official';
    // APP唤起链接
    const appDeepLink = `yourapp://invite?code=${inviteCode}`;

    function handleRedirect() {
      const userAgent = navigator.userAgent;
      if (/iPhone|iPad|iPod/i.test(userAgent)) {
        // iOS优先用Universal Link唤起，2秒后没反应就跳App Store
        window.location.href = `https://your-domain.com/invite?code=${inviteCode}`;
        setTimeout(() => window.location.href = iosStoreUrl, 2000);
      } else if (/Android/i.test(userAgent)) {
        // Android尝试用Scheme唤起，2秒后跳Play Store
        window.location.href = appDeepLink;
        setTimeout(() => window.location.href = androidStoreUrl, 2000);
      } else {
        // 其他设备默认跳App Store或官网
        window.location.href = iosStoreUrl;
      }
    }

    window.addEventListener('load', handleRedirect);
  </script>
</head>
<body>
  <p style="text-align: center; margin-top: 50px;">正在跳转，请稍候...</p>
</body>
</html>

3. 短信里使用中转页链接 #

把短信里的邀请链接换成中转页的URL，比如：

你的好友张三邀请你使用XX应用，点击加入领专属福利：https://your-domain.com/invite?code=ZHANGSAN123

4. 在APP内处理唤起链接 #

用Expo的Linking模块监听深度链接，获取邀请码并自动处理注册流程：

import * as Linking from 'expo-linking';
import { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';

export default function App() {
  const navigation = useNavigation();

  useEffect(() => {
    // 处理APP启动时的链接
    const getInitialLink = async () => {
      const url = await Linking.getInitialURL();
      if (url) handleInviteLink(url);
    };

    // 处理APP后台唤起时的链接
    const linkSubscription = Linking.addEventListener('url', (event) => {
      handleInviteLink(event.url);
    });

    getInitialLink();
    return () => linkSubscription.remove();
  }, []);

  const handleInviteLink = (url) => {
    const params = new URLSearchParams(new URL(url).search);
    const inviteCode = params.get('code');
    if (inviteCode) {
      // 跳转到注册页面并携带邀请码
      navigation.navigate('Register', { inviteCode });
    }
  };

  return (
    // 你的APP页面内容
  );
}

5. 关键配置与测试注意事项 #

• iOS需要在你的域名根目录下的.well-known文件夹里放置apple-app-site-association文件，内容示例：

  {
    "applinks": {
      "apps": [],
      "details": [
        {
          "appID": "你的Apple Team ID.com.yourapp.official",
          "paths": ["/invite/*"]
        }
      ]
    }
  }
  

• 测试必须用真实设备，模拟器对Universal Link的支持有限；同时确保APP是Expo构建的测试版或正式版，不能用Expo Go测试深度链接
• 安卓侧Expo托管工作流会根据app.json的配置自动生成intent过滤器，无需额外原生配置

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