React Native中点击推送通知如何实现页面跳转？

方案1：使用React Navigation根导航Ref（官方推荐） #

无需依赖额外工具，是React Navigation官方给出的全局跳转方案：

1. 创建根导航工具文件 RootNavigation.js

import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef();

export function navigate(name, params) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  } else {
    // 导航未就绪时暂存跳转参数，等就绪后执行
    global.pendingNavigation = { name, params };
  }
}

2. 在App.js的NavigationContainer绑定ref

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef, navigate } from './RootNavigation';

function App() {
  useEffect(() => {
    // 应用启动后检查是否有待处理的跳转
    if (global.pendingNavigation) {
      navigate(global.pendingNavigation.name, global.pendingNavigation.params);
      global.pendingNavigation = null;
    }
  }, [])

  return (
    <NavigationContainer ref={navigationRef}>
      {/* 原有路由栈配置 */}
    </NavigationContainer>
  )
}

3. 在index.js的onNotification回调里直接调用跳转

import PushNotification from 'react-native-push-notification';
import { navigate } from './RootNavigation';

PushNotification.configure({
  // 其他原有配置项
  onNotification: (notification) => {
    // 从通知数据中取目标页面和参数
    const { targetPage, targetParams } = notification.data;
    navigate(targetPage, targetParams);
    
    // 安卓端必须调用finish完成通知处理
    notification.finish(PushNotification.FetchResult.NoData);
  }
})

方案2：使用深度链接（Deep Linking）统一跳转逻辑 #

适合需要统一处理推送跳转、外部唤起跳转的场景：

1. 配置应用的深链接Schema，安卓在AndroidManifest.xml配置、iOS在Info.plist配置，例如设置schema为myapp
2. 在React Navigation中配置深链接匹配规则

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      OrderDetail: 'order/detail/:id',
      MessageList: 'message/list'
    }
  }
}

// App.js中传入NavigationContainer
<NavigationContainer linking={linking}>
  {/* 原有路由配置 */}
</NavigationContainer>

3. index.js的onNotification中直接唤起深链接

import { Linking } from 'react-native';

onNotification: (notification) => {
  const { deepLink } = notification.data; // 例如通知携带深链接 myapp://order/detail/123
  Linking.openURL(deepLink);
}

方案3：全局事件总线中转 #

适合路由逻辑复杂、需要多层中转的场景：

1. 安装轻量事件库mitt，或直接使用React Native自带的NativeEventEmitter
2. 创建全局事件实例

// eventBus.js
import mitt from 'mitt';
export const eventBus = mitt();

3. index.js的onNotification中触发跳转事件

import { eventBus } from './eventBus';

onNotification: (notification) => {
  eventBus.emit('pushNotificationClick', notification.data);
}

4. 在根组件/路由外层监听事件，用现有navigation跳转

useEffect(() => {
  const handlePushJump = (data) => {
    navigation.navigate(data.targetPage, data.targetParams);
  }
  eventBus.on('pushNotificationClick', handlePushJump);
  return () => eventBus.off('pushNotificationClick', handlePushJump);
}, [navigation])

注意事项 #

• 应用处于被杀死的冷启动状态时，建议先把通知跳转参数持久化存入AsyncStorage，等应用初始化完成、导航就绪后再读取执行跳转，避免跳转丢失
• 安卓端需确保通知channel配置正确，react-native-push-notification的原生配置已完成，否则后台/杀死状态下onNotification可能无法触发

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