React Navigation v6如何隐藏头部并实现自定义样式配置

问题代码错误点 #

• Stack.Navigator 配置中使用了v6已废弃的 headerMode: 'none' 属性，该属性在v6中被移除，统一用 headerShown 控制头部显隐
• Tab.Navigator 的 screenOptions 存在语法错误，逗号运算符导致你写的 headerShown: false 配置被直接丢弃，未实际生效

1. 修正栈导航代码 #

<NavigationContainer>
  <Stack.Navigator
    initialRouteName='OtpScreen'
    // 全局配置所有栈页面隐藏头部
    screenOptions={{
      headerShown: false,
    }}
  >
    <Stack.Screen
      name='Tabs'
      component={MyTabs}
      // 单独配置单个页面隐藏的话可以在这里加，全局配了就不用重复写
      // options={{ headerShown: false }}
    />
    {/* 其他栈页面 */}
  </Stack.Navigator>
</NavigationContainer>

2. 修正标签导航代码 #

把headerShown配置合并到screenOptions返回的配置对象中，修复语法错误：

<Tab.Navigator
  useHeaderHeight={false}
  screenOptions={({ route }) => ({
    // 标签导航下所有页面统一隐藏头部，不需要单独给每个Tab Screen加
    headerShown: false,
    tabBarIcon: ({ focused, color, size }) => {
      let iconName;

      if (route.name === 'Home') {
        iconName = focused
          ? 'ios-information-circle'
          : 'ios-information-circle-outline';
      } else if (route.name === 'Settings') {
        iconName = focused ? 'ios-list' : 'ios-list';
      }
      return <Ionicons name={iconName} size={size} color={color} />;
    },
    tabBarActiveTintColor: 'tomato',
    tabBarInactiveTintColor: 'gray',
    // 这里可以加自定义tabBar样式，比如tabBarStyle修改背景、高度等
    tabBarStyle: {
      backgroundColor: '#fff',
      borderTopWidth: 1,
      height: 60,
      paddingBottom: 5,
      paddingTop: 5
    }
  })}
>
{/* 你的Tab Screen配置 */}
</Tab.Navigator>

3. 可选：自定义单页面头部样式 #

如果有部分页面需要显示自定义头部，可以单独给对应Screen的options配置：

<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{
    headerShown: true,
    headerStyle: {
      backgroundColor: '#2196F3',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    // 也可以完全自定义头部组件
    // header: () => <CustomHeader />
  }}
/>

内容的提问来源于stack exchange，提问作者Ibad