如何在反应本机和反应导航中导航到不同屏幕时删除顶部选项卡导航器

Question

我在屏幕 header 的正下方实现了 Tab 导航。它工作正常但问题是当我导航到不同的屏幕选项卡栏仍然存在时。当我进入详细信息屏幕时，我想隐藏它们。我不知道该怎么做。任何帮助都会很棒。

这就是我想要的这是我的屏幕。

在这里，当我单击任何列表项时，我想导航到详细信息屏幕。我确实得到了导航，但标签栏仍然存在。这是我的代码。

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const KarwarStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Karawar" component={Karwar} />
      <Stack.Screen name="KarawarDetail" component={KarawarDetail} />
    </Stack.Navigator>
  );
};

const CommunityHub = ({}) => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Karwar" component={KarwarStack} />
      <Tab.Screen name="Hubli" component={Hubli} />
      <Tab.Screen name="Bangalore" component={Bangalore} />
    </Tab.Navigator>
  );
};

export default CommunityHub;

Answer 1

由于您的堆栈是选项卡导航器的一部分，因此当您导航到 KarawarDetail 屏幕时，选项卡将始终保留在那里。您需要尝试逆逻辑，解决方法可能是这样

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const CommunityHub = ({}) => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Karwar" component={Karwar} />
      <Tab.Screen name="Hubli" component={Hubli} />
      <Tab.Screen name="Bangalore" component={Bangalore} />
    </Tab.Navigator>
  );
};

const RootStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="CommunityHub" component={CommunityHub } />
      <Stack.Screen name="KarawarDetail" component={KarawarDetail} />
    </Stack.Navigator>
  );
};

export default RootStack;

如何在反应本机和反应导航中导航到不同屏幕时删除顶部选项卡导航器

How to remove top tab Navigator while navigating to different screen in react native and reactnavigation

react-native

react-navigation

react-navigation-v5