React Navigation 6.0 双 header 问题

Question

我有与 React Navigation 相同的导航代码结构 5.x

    ...
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    ...

我将 React Navigation 5 升级到 6.x

 "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/stack": "^6.0.7",

当我运行我得到双 header 代码时，上面一个 header 名称是 Tabs Screen name，下面一个是 headerTitle name

这些是我的导航的代码结构

const HomeStack = createStackNavigator();
const HomeStackScreen = ({navigation, props}) => (
  <HomeStack.Navigator>
    <HomeStack.Screen
      name="HomeMain"
      component={HomeMain}
      options={{
        headerTitle: 'Delivery App',
      }}
    />
    <HomeStack.Screen
      name="Search"
      component={Search}
      options={{
        headerTitle: 'Search',
        headerTitleStyle: {
          fontFamily: 'Muli-Regular',
        },
      }}
    />

  ...

  </HomeStack.Navigator>
);

const CartStack = createStackNavigator();
const CartStackScreen = () => (
  <CartStack.Navigator>
    <CartStack.Screen
      name="CART"
      component={Cart}
      options={({route}) => ({
        headerTitleStyle: {
          fontFamily: 'Muli-Regular',
        },
      })}
    />
 ...
  </CartStack.Navigator>
);

const ProfileStack = createStackNavigator();
const ProfileStackScreen = () => (
  <ProfileStack.Navigator>
    <ProfileStack.Screen
      name="ProfileMain"
      component={ProfileMain}
      options={({route}) => ({
        headerTitle: 'Profile' /*headerShown: false*/,
        headerTitleStyle: {
          fontFamily: 'Muli-Regular',
        },
      })}
    />
    ...
  </ProfileStack.Navigator>
);

const AppTabs = createBottomTabNavigator();
const AppTabsScreen = props => {
  return (
    <AppTabs.Navigator
      tabBarOptions={{
        activeTintColor: '#00D084',
        inactiveTintColor: '#C6CDD7',
      }}>
      <AppTabs.Screen
        name="Home"   //<------ This  name is showing conflict is here
        component={HomeStackScreen}
        options={{
          tabBarIcon: props => (
            <Icon.Ionicons name="home" size={props.size} color={props.color} />
          ),
        }}
      />
      <AppTabs.Screen
        name="Cart"
        component={CartStackScreen}
        options={{
          tabBarIcon: props => (
            <Icon.Ionicons name="cart" size={props.size} color={props.color} />
          ),
          tabBarBadge: props.cartCount,
        }}
      />
      <AppTabs.Screen
        name="Account"
        component={ProfileStackScreen}
        options={{
          tabBarIcon: props => (
            <Icon.Ionicons
              name="person"
              size={props.size}
              color={props.color}
            />
          ),
        }}
      />
    </AppTabs.Navigator>
  );
};

我们在哪里更改以解决此问题，我已经尝试 header 也显示 null 或 false，但它仅隐藏第二个 Header。我想隐藏第一个。

这是截图

Answer 1

您需要将 headerShown: false 添加到选项卡导航器。

例如

<AppTabs.Navigator
      screenOptions: {{ headerShown: false }}
      tabBarOptions={{
        activeTintColor: '#00D084',
        inactiveTintColor: '#C6CDD7',
      }}>
{...code}

</AppTabs.Navigator/>

也就是说如果你想删除标签导航添加的header。如果您想删除 Stack 导航器，您可以对它执行相同的操作。

如果您不想从所有选项卡导航器中删除 header，您可以像这样单独添加它：

     <AppTabs.Screen
        name="Account"
        component={ProfileStackScreen}
        options={{
          headerShown: false
          // other options
        }}
      />

这将仅从该选项卡中删除 header。

参考：https://reactnavigation.org/docs/headers

Answer 2

我已经通过这行代码解决了我的问题。

<Tab.Navigator initialRouteName="Home" screenOptions={{tabBarActiveTintColor:Colors.appPurple,headerShown:false}}> {...code} </Tab.Navigator>

React Navigation 6.0 双 header 问题

React Navigation 6.0 double header issue

javascript

react-native

react-navigation-v5

react-navigation-v6