React Native场景下通过动态链接发送好友请求的实现方案咨询

该需求可以通过深度链接+延迟深度链接的组合方案实现，全链路适配成本很低，以下是具体落地步骤：

1. 端侧基础配置 #

首先需要分别给iOS、Android端配置链接唤醒能力，让系统可以识别你的专属链接并调起应用：

1.1 iOS端配置 #

• 在Xcode的项目设置中开启「Associated Domains」能力，填入你用于分发动态链接的域名前缀
• 在AppDelegate.m中实现openURL、continueUserActivity两个系统回调，将唤醒时拿到的链接参数透传给RN层处理

1.2 Android端配置 #

• 在AndroidManifest.xml中给入口Activity添加intent-filter，配置你自定义的scheme、host，匹配动态链接的格式规则
• 在MainActivity的onCreate、onNewIntent方法中获取Intent携带的data参数，透传给RN层处理

2. RN层逻辑实现 #

2.1 链接监听与解析 #

直接使用React Native官方提供的Linking模块处理唤醒逻辑即可，示例代码如下：

import { Linking } from 'react-native';

// 监听应用在后台时被链接唤醒的场景
Linking.addEventListener('url', (event) => {
  handleLink(event.url);
});

// 处理应用未启动时被链接冷启动的场景
const initLinkCheck = async () => {
  const initialUrl = await Linking.getInitialURL();
  if (initialUrl) handleLink(initialUrl);
}
initLinkCheck();

const handleLink = (url) => {
  // 匹配好友请求的链接规则，解析邀请人参数
  if (url.includes('/friend/request')) {
    const inviterId = new URL(url).searchParams.get('inviter_id');
    // 跳转好友请求页面，传入邀请人ID参数
    navigation.navigate('FriendRequestPage', { inviterId });
  }
}

2.2 好友请求页面开发 #

• 页面拿到inviterId参数后，请求后端接口拉取邀请人头像、昵称等基础信息展示
• 页面添加接受、拒绝两个操作按钮，点击后分别调用后端对应接口，操作完成后给用户toast反馈，再跳转回好友列表或者首页即可

3. 未安装应用的降级逻辑 #

对外分发的链接统一用HTTPS格式的网页链接，网页内做两层逻辑：

• 首先尝试唤起应用的scheme链接，若3秒内没有唤起成功，自动跳转对应系统的应用商店下载页
• 网页会把邀请人ID参数暂存在剪贴板，用户安装应用首次启动时，读取剪贴板的参数匹配好友请求逻辑，直接弹出请求卡片或者跳转对应页面即可

4. 多渠道分发适配 #

• 微信、QQ等社交平台会拦截scheme唤起，你可以在落地页添加引导提示，让用户点击右上角用系统浏览器打开链接，再执行唤起/下载逻辑
• 短信、邮件等渠道可以直接放HTTPS链接，系统默认支持直接跳转

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