检查屏幕组件是否以模态方式呈现或者位于 React Native 中的 TabNavigator 中

Question

使用 React Native 和 react-native-navigation 我按照以下方式设置了导航；

const HomeLayout = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Home"
        component={HomeScreen}
      />
      <HomeStack.Screen
        name="Search"
        component={SearchScreen}
        options={{
          presentation: "fullScreenModal",
        }}
      />
    </HomeStack.Navigator>
  );
};

const TabLayout = () => {
  return (
    <Tabs.Navigator>
      <Tabs.Screen
        name="HomeLayout"
        component={HomeLayout}
      />
      <Tabs.Screen
        name="Search"
        component={SearchScreen}
      />
    </Tabs.Navigator>
  );
};

我想检查我的 SearchScreen 是否以模态方式呈现在我的 HomeLayout 中，或者它在我的选项卡导航器中，根据这一点，我需要进行一些 UI 自定义。

Answer 1

我觉得最简单的方法是将模态的初始参数添加为 true 或 false，而不是检查父导航器。在此基础上更改 UI。

<Tabs.Screen
    name="Search"
    component={SearchScreen}
    initialParams={{ modal: false }}
    options={{
      tabBarIcon: ({ focused, color }) => (
        <MaterialCommunityIcons
          name={focused ? "text-box-search" : "text-box-search-outline"}
          size={25}
          color={color}
        />
      ),
    }}
  />