在 React Native 的 React Navigation 5 中，HeaderShown: false 不会隐藏标题答案

【问题标题】：In React Navigation 5 in React Native, HeaderShown: false won't hide header在 React Native 的 React Navigation 5 中，HeaderShown: false 不会隐藏标题
【发布时间】：2020-03-08 00:02:20
【问题描述】：

我一直在尝试使用 React Native 并注意到 expo init 命令现在引入了一个更新的基本代码库。我遇到的问题是当我们在导航器组件的选项中使用 headerShown 属性时，标题没有隐藏。

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>
  );
}

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

主页组件如下所示：

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

HomeScreen.navigationOptions = {
  headerShown: false
};

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

【问题讨论】：

尝试设置 - headermode: null or false

标签： reactjs react-native react-navigation expo react-native-navigation

【解决方案1】：

此堆栈上的所有屏幕

<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}} />

【讨论】：

【解决方案2】：

事实证明，新的基本代码创建了一个堆栈导航器，该导航器使用底部选项卡导航器引用屏幕，将显示的标题属性应用于堆栈导航器禁用页面上的标题

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

【讨论】：