1

我有与 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，但它只隐藏了第二个标题。我想隐藏第一个。

这是屏幕截图

在此处输入图像描述

4

2 回答 2

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

于 2021-08-27T21:02:24.523 回答
0

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

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

于 2021-11-13T07:38:13.603 回答