在 React Native 的 React Navigation 5 中，HeaderShown: false 不会隐藏 header

Question

我一直在 React Native 中进行试验，并注意到 expo init 命令现在引入了一个更新的基础代码库作为起点。当我们在导航器组件的选项中使用 headerShown 道具时，我遇到的问题与 header 不隐藏有关。

import * as React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/HomeScreen";
import LinksScreen from "../screens/LinksScreen";

const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = "Home";

export default function BottomTabNavigator({ navigation, route }) {
  // navigation.setOptions({
  //   headerShown: false
  // });

  return (
    <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <BottomTab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="md-code-working" />
          )
        }}
      />
      <BottomTab.Screen
        name="Links"
        component={LinksScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="md-book" />
          )
        }}
      />
    </BottomTab.Navigator>
  );
}

上面的代码是我尝试应用显示的 header 的不同方法。我还尝试通过在每个页面组件中为导航选项创建静态方法来使用较旧的方法。两者似乎都不起作用，令人讨厌的是文档建议将其应用于导航器是在此版本 react-navigation.

中使用它的方法

主页组件如下所示：

export default function HomeScreen() {
  return <View style={styles.container}></View>;
}

HomeScreen.navigationOptions = {
  headerShown: false
};

链接页面看起来几乎完全相同，但没有渲染功能。

Answer 1

所以事实证明，新的基本代码创建了一个堆栈导航器，该导航器引用屏幕，底部选项卡导航器将 header shown prop 应用于堆栈导航器，禁用了 headers页

<Stack.Navigator screenOptions={{ headerShown: false }}>

Answer 2

对于此堆栈上的所有屏幕

<LoggedStack.Navigator
    screenOptions={{ headerShown: false}} >
        <LoggedStack.Screen name='Dash' component={MyDrawer} />
        <LoggedStack.Screen name="Login" component={Login} />
</LoggedStack.Navigator>

对于特定屏幕

<Drawer.Screen name="Dept" component={DepartMentScreen} options={{ headerShown: false}} />

在 React Native 的 React Navigation 5 中，HeaderShown: false 不会隐藏 header

In React Navigation 5 in React Native, HeaderShown: false won't hide header

reactjs

react-native

react-native-navigation

react-navigation

expo