React Navigation 6.0 双标头问题

Posted 2023-02-21

【中文标题】React Navigation 6.0 双标头问题

【英文标题】：React Navigation 6.0 double header issue

【发布时间】：2021-10-27 17:10:19

【问题描述】：

我有与 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",

当我运行代码时，我得到了双标题，上面一个标题名称是选项卡屏幕名称，下面一个是标题标题名称

这些是我导航的代码结构

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>
  );
;

我们在哪里更改以解决此问题，我也尝试了 headerShow null 或 false，但它只隐藏了第二个标题。我想隐藏第一个。

这是截图

【问题讨论】：

headerShow 或 headerShown?正确的做法是headerShown: false

我做到了，我也提到了那里，但它只隐藏了我想显示的第二个标题。

【参考方案1】：

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

例如

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

</AppTabs.Navigator/>

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

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

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

这将只从该选项卡中删除标题。

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

【讨论】：

谢谢！有效。对于React-Navigation-6.x，我们必须在标签导航部分使用screenOptions 代替tabBarOptions。

【参考方案2】：

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

...code