React Navigation 5.X：如何判断屏幕所在的导航类型（底部标签/堆栈）并按需渲染组件

当然可以搞定！在React Navigation 5.x里，我们有几种实用的方式来判断当前屏幕是否处于底部标签导航中，还能轻松实现同一个屏幕根据所在导航类型渲染不同组件的需求，我给你详细说说：

一、判断当前屏幕是否在Bottom Tab Navigation中 #

方法1：通过父导航器实例判断 #

我们可以利用navigation.dangerouslyGetParent()来逐层向上查找父导航器，判断是否存在底部标签类型的导航器。虽然方法名带“dangerously”，但在5.x版本里这是官方允许的安全用法，只要你不随意修改导航器内部状态就没问题。

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

function MyScreen() {
  const navigation = useNavigation();

  const checkIsInBottomTab = () => {
    let parentNavigator = navigation.dangerouslyGetParent();
    // 循环往上遍历父导航器
    while (parentNavigator) {
      // 底部标签导航器的router类型为'tab'
      if (parentNavigator.router.type === 'tab') {
        return true;
      }
      parentNavigator = parentNavigator.dangerouslyGetParent();
    }
    return false;
  };

  const isInBottomTab = checkIsInBottomTab();
}

方法2：通过导航状态层级判断 #

借助useNavigationState获取当前导航状态，逐层检查路由状态的类型，判断是否处于底部标签导航的层级中：

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

function MyScreen() {
  const navigationState = useNavigationState(state => state);

  const checkIsInBottomTab = () => {
    let currentState = navigationState;
    while (currentState) {
      // 底部标签导航的状态类型为'tab'
      if (currentState.type === 'tab') {
        return true;
      }
      // 如果是嵌套导航（比如栈导航嵌套在标签里），进入子路由状态继续判断
      currentState = currentState.routes[currentState.index]?.state;
    }
    return false;
  };

  const isInBottomTab = checkIsInBottomTab();
}

方法3：最直接的方式——通过路由参数传递 #

如果你是在固定的导航器中注册同一个屏幕，完全可以在注册时直接传递标记参数，这种方法简单粗暴且不易出错：

// 在底部标签导航中注册屏幕时
<Tab.Screen
  name="MyScreen"
  component={MyScreen}
  initialParams={{ isInBottomTab: true }}
/>

// 在栈导航中注册屏幕时
<Stack.Screen
  name="MyScreen"
  component={MyScreen}
  initialParams={{ isInBottomTab: false }}
/>

// 在屏幕组件中直接读取参数
function MyScreen({ route }) {
  const isInBottomTab = route.params?.isInBottomTab || false;
}

二、根据导航类型针对性渲染组件 #

有了上面的判断结果，我们就可以轻松实现条件渲染了。比如同一个屏幕在标签导航里显示底部标签栏适配的组件，在栈导航里显示无标签栏的布局：

function MyScreen({ route }) {
  // 这里任选上面的一种判断方式，比如用参数传递的方法
  const isInBottomTab = route.params?.isInBottomTab || false;

  return (
    <View style={{ flex: 1 }}>
      {/* 通用内容 */}
      <Text>这是屏幕的通用内容</Text>

      {/* 根据导航类型渲染不同组件 */}
      {isInBottomTab ? (
        <TabSpecificComponent />
      ) : (
        <StackSpecificComponent />
      )}
    </View>
  );
}

小提示 #

• 如果你的导航结构比较复杂（比如多层嵌套），推荐使用方法1或方法2来动态判断；
• 如果只是简单的两个导航器共用一个屏幕，方法3的参数传递是最省心的选择。

内容的提问来源于stack exchange，提问作者Ghayoor ul Haq