如何在 React Native 中隐藏顶部导航栏

Question

我需要在特定屏幕上隐藏顶部的导航栏。如何实现？我正在使用 react-navigation/material-top-tabs

//page 1  <Stack.Navigator headerMode="none" initialRouteName="Connection">
      <Stack.Screen
        name="Connection"
        component={UserScreen}
        options={{ unmountOnBlur: true }}
      />
    </Stack.Navigator>

//page2 <Tab.Navigator
          // screenOptions={{ tabBarVisible: false }}
          // screenOptions={({ route }) => ({
          //   tabBarVisible: false,
          // })}
          initialRouteName="UserTabStack"
          tabBarOptions={{
            labelStyle: {
              fontWeight: "bold",
            },
            indicatorStyle: {
              backgroundColor: "black",
            },
          }}
        >
          <Tab.Screen
            name="UserTabStack"
            //  component={UserList}
            component={UserTabStack}
            options={{ tabBarLabel: "Userlist" }}
            listeners={({ route }) => {
              setTabPage(route.name);
            }}
          />
          <Tab.Screen
            name="GroupList"
            // component={GroupList}
            component={GroupTabStack}
            options={{ tabBarLabel: "GroupList" }}
            listeners={({ route }) => {
              setTabPage(route.name);
            }}
          />
        </Tab.Navigator> //page3  <Stack.Navigator headerMode="none" initialRouteName="UserList">
      <Stack.Screen
        name="UserList"
        component={UserList}
        options={{ unmountOnBlur: true }}
      />
      <Stack.Screen
        name="AddConnection"
        component={AddUserScreen}
        options={{ unmountOnBlur: true }}
      />
      <Stack.Screen
        name="Chat"
        component={ChatScreen}
        options={{ unmountOnBlur: true }}
      />
    </Stack.Navigator>

Answer 1

在 Stack.Screen 选项中将 headerShown 设置为 false

<Stack.Screen
        name="UserList"
        component={UserList}
        options={{ unmountOnBlur: true, headerShown: false }}
      />

Answer 2

根据 React Navigation Docs，您可以通过更改导航结构来隐藏特定屏幕上的选项卡栏。在他们的例子中：

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

选项卡导航器位于第一个屏幕内，是应用程序导航器中的第一个组件。以下组件是您不希望顶部栏显示的两个组件，因此在本例中为“设置”和“配置文件”。

如何在 React Native 中隐藏顶部导航栏

How to hide top navigation bar in react native

react-native

react-native-ios

react-native-navigation