React Native升级React Navigation V2后，createBottomTabNavigator页面头部不显示

Hey there! I hit this exact snag when upgrading from React Navigation 1.x to 2.x—let me break down what’s happening and how to fix it quickly.

Why the Header Disappeared #

In React Navigation 1.x, the old TabNavigator would automatically render the header for each child screen. But in 2.x, createBottomTabNavigator defaults to hiding all screen headers as a deliberate design change. It assumes you’ll handle navigation stacks at a higher level, which is more flexible for most apps.

Solution 1: Wrap Each Tab Screen in a Stack Navigator (Recommended) #

The cleanest approach is to give each tab its own navigation stack using createStackNavigator. This not only brings back your header but also lets you handle in-tab page navigation properly (with back buttons, etc.) later on.

Here’s how to adjust your code:

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

// First, wrap your HomeScreen in a stack navigator
const HomeStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
    // Your existing navigationOptions will work here—no need to rewrite them!
  }
});

// Then use this stack as the screen for your bottom tab
const AppTabs = createBottomTabNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      tabBarLabel: 'Home'
      // Add your tab icon or other tab-specific config here
    }
  },
  // Repeat this pattern for your other tab screens too
});

Your HomeScreen’s existing navigationOptions (with the logo, header buttons, etc.) will work exactly as before because the stack navigator will render the header by default.

Solution 2: Force Header Render for Individual Screens #

If you don’t want to use a stack navigator for some reason, you can explicitly define the header in your screen’s navigationOptions. This is a quick fix but less flexible if you plan to add in-tab navigation later.

Update your HomeScreen’s navigationOptions like this:

static navigationOptions = ({ navigation }) => {
  return {
    // Explicitly render your custom header
    header: () => (
      <View style={{ 
        paddingRight: 10, 
        paddingLeft: 10, 
        height: 60, 
        flexDirection: 'row', 
        alignItems: 'center', 
        justifyContent: 'space-between',
        backgroundColor: '#fff' // Match your original headerStyle
      }}>
        <ClickableIcon 
          source={NotificationInactive} 
          height={35} 
          width={35} 
          onIconPressed={() => alert("Notifications Clicked")} 
        />
        <Logo type="default_logo" />
        <ClickableIcon 
          height={35} 
          width={35} 
          source={AddNewUserInactive} 
          onIconPressed={() => alert("Add New Clicked")} 
        />
      </View>
    )
  };
};

Quick Check: Verify Your NavigationOptions Syntax #

Just a quick note—your original code looks mostly fine, but double-check that your navigationOptions function is properly closed (it looks like it’s missing a closing } at the end, which might cause silent errors).

Hope this gets your header back up and running! 🚀

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