React Native中为iOS和Android的FCM通知配置Deep Link

一、统一FCM消息体配置 #

别依赖Android专属的link字段，直接在FCM消息的data里自定义跳转参数，两端都能解析。示例消息体如下：

{
  "notification": {
    "title": "新商品上架",
    "body": "点击查看详情"
  },
  "data": {
    "deepLink": "/product/123",
    "pageType": "productDetail"
  },
  "to": "目标设备令牌"
}

二、Android端配置步骤 #

1. 添加Deep Link的Intent Filter
   打开AndroidManifest.xml，找到主Activity（一般是MainActivity），插入以下Intent Filter，支持自定义scheme或通用链接：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 自定义scheme，比如myapp:// -->
    <data android:scheme="myapp" />
    <!-- 用通用链接的话，替换成你的域名配置 -->
    <!-- <data android:scheme="https" android:host="yourdomain.com" android:pathPrefix="/app" /> -->
</intent-filter>

2. 处理通知点击事件
   在React Native代码里监听两种场景的通知点击，拿到data里的deepLink后用路由库跳转：

import messaging from '@react-native-firebase/messaging';

// 应用在后台/前台时点击通知
messaging().onNotificationOpenedApp(remoteMessage => {
  const targetLink = remoteMessage.data.deepLink;
  if (targetLink) {
    // 替换成你的路由跳转逻辑
    navigation.navigate(targetLink);
  }
});

// 应用完全关闭时点击通知，初始化时检查
async function checkInitialNotification() {
  const initialNotice = await messaging().getInitialNotification();
  if (initialNotice) {
    const targetLink = initialNotice.data.deepLink;
    if (targetLink) {
      navigation.navigate(targetLink);
    }
  }
}

// 组件挂载时执行检查
useEffect(() => {
  checkInitialNotification();
}, []);

三、iOS端配置步骤 #

1. 配置URL Scheme或Universal Links

• 自定义URL Scheme：打开Xcode，进入项目设置→Info→URL Types，新增条目：Identifier填你的Bundle ID，URL Schemes填自定义scheme（比如myapp）。
• Universal Links：在苹果开发者后台开启Associated Domains，添加applinks:yourdomain.com；同时在你的域名根目录放置apple-app-site-association文件，配置路径映射规则。

2. 处理通知点击和外部Deep Link
   iOS通知点击逻辑和Android一致，还要处理外部链接打开应用的情况：

import { Linking } from 'react-native';

useEffect(() => {
  // 监听外部Deep Link打开应用
  const handleExternalLink = (event) => {
    const url = event.url;
    // 解析跳转路径，比如myapp://product/123 → /product/123
    const targetLink = url.replace('myapp://', '');
    if (targetLink) {
      navigation.navigate(targetLink);
    }
  };

  Linking.addEventListener('url', handleExternalLink);

  // 检查应用启动时是否来自外部Deep Link
  Linking.getInitialURL().then(url => {
    if (url) {
      const targetLink = url.replace('myapp://', '');
      navigation.navigate(targetLink);
    }
  });

  return () => {
    Linking.removeEventListener('url', handleExternalLink);
  };
}, [navigation]);

3. 额外注意：如果iOS前台收不到通知，确保AppDelegate.m里FCM通知回调配置正确，React Native Firebase一般已处理，若有问题可在didReceiveRemoteNotification里手动传递数据到RN层。

四、统一跳转逻辑封装 #

把两端跳转逻辑抽成函数，方便维护：

const navigateByDeepLink = (targetLink) => {
  // 根据你的路由结构做对应跳转
  switch(targetLink) {
    case '/product/123':
      navigation.navigate('ProductDetail', { id: 123 });
      break;
    case '/user/profile':
      navigation.navigate('UserProfile');
      break;
    default:
      navigation.navigate('Home');
  }
};

// 通知点击时调用
messaging().onNotificationOpenedApp(remoteMessage => {
  const targetLink = remoteMessage.data.deepLink;
  if (targetLink) {
    navigateByDeepLink(targetLink);
  }
});

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