React Native中判断SearchScreen是模态展示还是处于TabNavigator内

下面提供几种实用方法来区分SearchScreen的两种展示场景，从而定制不同UI：

方法1：跳转时传递标识参数 #

从HomeScreen跳转到模态Search页时，附带一个参数：

// HomeScreen内的跳转逻辑
navigation.navigate('Search', { isModal: true });

在SearchScreen中读取该参数：

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

const SearchScreen = () => {
  const { params } = useRoute();
  const isModal = params?.isModal ?? false;

  return (
    {/* 根据isModal渲染对应UI */}
    {isModal ? (
      <View>
        {/* 模态页专属UI */}
      </View>
    ) : (
      <View>
        {/* 标签栏页专属UI */}
      </View>
    )}
  );
};

方法2：通过导航器ID判断 #

先给导航器设置唯一ID：

// 修改HomeLayout中的Stack导航器
const HomeLayout = () => {
  return (
    <HomeStack.Navigator id="HomeStack">
      {/* 原有屏幕配置 */}
    </HomeStack.Navigator>
  );
};

// 修改TabLayout中的Tabs导航器
const TabLayout = () => {
  return (
    <Tabs.Navigator id="TabLayout">
      {/* 原有屏幕配置 */}
    </Tabs.Navigator>
  );
};

然后在SearchScreen中通过父导航器ID判断场景：

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

const SearchScreen = () => {
  const navigation = useNavigation();
  const parentId = navigation.getParent()?.getId();

  const isModal = parentId === 'HomeStack';
  const isInTab = parentId === 'TabLayout';

  return (
    {/* 根据场景渲染UI */}
  );
};

方法3：读取路由的presentation属性 #

模态打开的屏幕，其路由会带有presentation属性，直接读取判断：

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

const SearchScreen = () => {
  const route = useRoute();
  const isModal = route.presentation === 'fullScreenModal';

  return (
    {/* 根据isModal渲染对应UI */}
  );
};

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