react native 为什么我的导航显示 2 headers？

Question

我想定制我的 header。问题是，它显示 two headers。我的 custom header 和 Tab Header "Home".

import * as React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {
  BottomTabBar,
  createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';
import { Entypo, FontAwesome5 } from '@expo/vector-icons';
import Home from '../screens/Home';
import News from '../screens/News';
import Weapons from '../screens/stack/Weapons';
import HeaderHome from '../shared/headerHome';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const TabBar = () => (
  <Tab.Navigator
    tabBar={(props) => {
      return (
        <View>
          <BottomTabBar {...props} />
        </View>
      );
    }}
    screenOptions={{
      tabBarStyle: [{ display: 'flex' }],
      tabBarShowLabel: true,
      tabBarLabelStyle: {
        paddingBottom: 6,
        color: '#333',
      },
    }}>
    <Tab.Screen
      name="Home"
      component={Home}
      options={{
        tabBarIcon: ({ color, focused }) => (
          <Entypo name="home" size={24} color={focused ? '#37bfff' : '#888'} />
        ),
      }}
    />
    <Tab.Screen
      name="News"
      component={News}
      options={{
        tabBarIcon: ({ color, focused }) => (
          <Entypo
            name="newsletter"
            size={24}
            color={focused ? '#37bfff' : '#888'}
          />
        ),
      }}
    />
  </Tab.Navigator>
);

const Navigation = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen
        name="HomeScreen"
        component={TabBar}
        options={{
          header: () => <HeaderHome />,
        }}
      />
    </Stack.Navigator>
  </NavigationContainer>
);

const styles = StyleSheet.create({
  navigator: {
    borderTopWidth: 0,
    backgroundColor: 'transparent',
    elevation: 30,
    height: 60,
  },
});

export default Navigation;

Answer 1

您可以添加一个选项来隐藏 Tab.Navigator 的 header。在Tab.Navigator的screenOptions中添加headerShown: false如下图

<Tab.Navigator
    tabBar={(props) => {
      return (
        <View>
          <BottomTabBar {...props} />
        </View>
      );
    }}
    screenOptions={{
      tabBarStyle: [{ display: 'flex' }],
      tabBarShowLabel: true,
      tabBarLabelStyle: {
        paddingBottom: 6,
        color: '#333',
      },
      headerShown: false, // <--- Here
    }}>

查看适用于您的场景的工作示例 here

另一方面，如果你想隐藏Stack.Navigator的header，你可以如下所示

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

react native 为什么我的导航显示 2 headers？

react native why my navigation shows me 2 headers?

react-native

react-navigation

expo