react-navigation v5搭配底部标签栏时顶部header不显示如何解决

• react-navigation v5 中createBottomTabNavigator默认不自带顶部Header渲染能力，你把Header相关配置写在Tab.Screen的options里本身不会生效
• 你当前Tab.Screen对应的组件是嵌套的MainAppNavigator，如果这个嵌套导航是StackNavigator，Header默认会由嵌套的栈导航接管，外层Tab的Header配置也会被覆盖

方案1：直接开启Tab导航的Header渲染 #

如果不需要嵌套栈导航的Header，直接给Tab.Navigator添加配置开启Header即可：

const AppNavigator = () => (
  <Tab.Navigator 
    initialRouteName="Home"
    // 新增：全局开启Tab导航的Header显示
    screenOptions={{
      headerShown: true
    }}
  >
    <Tab.Screen
      name="Home"
      component={MainAppNavigator}
      options={{
        headerTitle: "Simply Dispatch",
        headerTintColor: "#fff",
        headerStyle: {
          backgroundColor: "#495AEC",
        },
        tabBarIcon: ({ color, size }) => (
          <FontAwesome name="truck" size={size} color={color} />
        ),
      }}
    />
  </Tab.Navigator>
);

方案2：Header配置写在嵌套的Stack导航上 #

如果你的MainAppNavigator是createStackNavigator创建的栈导航，直接把Header配置写到对应的栈屏幕上即可，同时可以把Tab层的Header关掉避免重复：

// MainAppNavigator对应文件配置示例
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

const MainAppNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen 
      name="HomeScreen" 
      component={HomeScreen}
      // Header配置写在这里即可生效
      options={{
        headerTitle: "Simply Dispatch",
        headerTintColor: "#fff",
        headerStyle: {
          backgroundColor: "#495AEC",
        },
      }}
    />
  </Stack.Navigator>
)

补充排查点 #

如果调整后还是不显示，可以检查两个点：

• 外层NavigationContainer是否正确包裹了整个导航结构
• 嵌套的MainAppNavigator里有没有配置headerShown: false主动关闭了Header

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