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

Question

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

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

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

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;