React Native点击Firebase推送通知跳转BottomTabNavigator嵌套页面

以下是几个可行的解决方案，针对你遇到的无navigation实例时跳转嵌套页面的问题：

方案一：修复RootNavigation的嵌套跳转逻辑 #

之前用createRef创建的RootNavigation没生效，大概率是调用方式或初始化问题，调整后即可支持嵌套路由跳转：

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);
  }
}

2. 在根组件的NavigationContainer中绑定引用：

import { navigationRef } from './RootNavigation';

function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      {/* 你的BottomTabNavigator组件 */}
    </NavigationContainer>
  );
}

3. 在Firebase通知点击回调中调用跳转：

import { navigate } from './RootNavigation';

// 处理Firebase通知点击
const handleNotificationTap = (notification) => {
  navigate('Chat', {
    screen: 'ChatSubB',
    params: { param1: 'hai' }
  });
};

这个写法和你在页面内用props.navigation.navigate的参数格式完全一致，只要导航容器初始化完成就能生效。

方案二：使用深度链接（Deep Linking） #

利用React Navigation原生支持的深度链接功能，把通知点击映射到对应路由，无需依赖navigation实例：

1. 配置导航的深度链接规则：

const linking = {
  prefixes: ['yourapp://'], // 替换成你的APP自定义协议
  config: {
    screens: {
      // 对应BottomTabNavigator的标签页名称
      Chat: {
        screens: {
          // 嵌套StackNavigator的子页面名称和路径规则
          ChatSubB: 'chat/subb/:param1'
        }
      },
      // 其他标签页的配置（如果需要）
    }
  }
};

// 在NavigationContainer中启用深度链接
<NavigationContainer linking={linking}>
  {/* 你的导航结构 */}
</NavigationContainer>

2. 在Firebase推送的payload中添加深度链接：
   推送的data字段里带上link: "yourapp://chat/subb/hai"（根据实际参数调整）。

3. 通知点击时打开链接：

import { Linking } from 'react-native';

const handleNotificationTap = (notification) => {
  const deepLink = notification.data.link;
  if (deepLink) {
    Linking.openURL(deepLink);
  }
};

这种方式不仅适配通知跳转，还支持外部APP、浏览器等场景的跳转，扩展性更强。

方案三：全局状态管理存跳转意图 #

通过全局状态（比如Context、Redux）存储跳转指令，在目标导航栈的页面中监听状态变化自动跳转：

以React Context为例： #

1. 创建导航意图Context：

import React, { createContext, useContext, useState } from 'react';

const NavIntentContext = createContext();

export function NavIntentProvider({ children }) {
  const [navIntent, setNavIntent] = useState(null);

  return (
    <NavIntentContext.Provider value={{ navIntent, setNavIntent }}>
      {children}
    </NavIntentContext.Provider>
  );
}

export function useNavIntent() {
  return useContext(NavIntentContext);
}

2. 在根组件包裹：

function App() {
  return (
    <NavIntentProvider>
      <NavigationContainer>
        {/* 你的导航结构 */}
      </NavigationContainer>
    </NavIntentProvider>
  );
}

3. 在Chat标签页的入口页面（比如ChatSubA或Chat栈的初始页）监听意图：

import { useNavIntent } from './NavIntentContext';
import { useEffect } from 'react';

function ChatSubA({ navigation }) {
  const { navIntent, setNavIntent } = useNavIntent();

  useEffect(() => {
    if (navIntent?.target === 'ChatSubB') {
      navigation.navigate('ChatSubB', navIntent.params);
      setNavIntent(null); // 重置意图避免重复跳转
    }
  }, [navIntent, navigation]);

  return <View>{/* 页面内容 */}</View>;
}

4. 在Firebase通知回调中设置跳转意图：

// 注意：如果在非组件环境（比如Firebase服务文件）中调用，需要把setNavIntent导出或用Redux等支持全局调用的状态管理
import { setNavIntent } from './NavIntentContext'; // 需调整Context写法导出setNavIntent

const handleNotificationTap = () => {
  setNavIntent({
    target: 'ChatSubB',
    params: { param1: 'hai' }
  });
};

内容的提问来源于stack exchange，提问作者Pooja Rajendran C