反应原生为什么我的导航显示我 2 个标题？答案

【问题标题】：react native why my navigation shows me 2 headers?反应原生为什么我的导航显示我 2 个标题？
【发布时间】：2023-04-07 06:28:02
【问题描述】：

我想自定义我的标题。问题是，它显示了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;

【问题讨论】：

标签： react-native expo react-navigation

【解决方案1】：

您可以添加一个选项来隐藏Tab.Navigator 的标题。将headerShown: false添加到Tab.Navigator的screenOptions中，如下图

<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的标题，你可以如下图所示

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

【讨论】：