react-native - 如何在 React Native Navigation V5 中始终显示底部选项卡标签？

Question

return (
      <Tab.Navigator
        barStyle={{backgroundColor: '#F2F2F2'}}
        initialRouteName="Catalog">
        <Tab.Screen
          name="Settings"
          options={{
            tabBarLabel: 'Alterações',
            title: 'Configurações',
            tabBarIcon: ({color}) => (
              <MaterialCommunityIcons name="cog" color="#000" size={22} />
            ),
          }}>
          {(props) => (
            <Settings
              {...props}
              params={{
                cpf: params.cpf ? params.cpf : cpf,
              }}
            />
          )}
        </Tab.Screen>

        <Tab.Screen
          name="Catalog"
          options={{
            tabBarVisible: false,
            title: 'Ofertas',
          }}>
          {(props) => (
            <Catalog
              {...props}
              params={{
                pracaId: params.pracaId ? params.pracaId : pracaId,
              }}
            />
          )}
        </Tab.Screen>
           [...]
      </Tab.Navigator>
    );

文档说要使用 titleDisplayMode 但在哪里？什么时候？我只找到旧版本的解决方案。我需要它到 v5. 请问有人可以帮我吗？

我已经包含了部分代码来了解我如何使用该库

Answer 1

有一个移动属性，您可以在导航器中将其设置为 false :

 <Tab.Navigator
    barStyle={{backgroundColor: '#F2F2F2'}}
    initialRouteName="Catalog"
    shifting={false} 
  >
   .....

无论是否使用平移样式，事件选项卡图标都会向上移动以显示标签，非事件选项卡不会有标签。

默认情况下，当您有超过 3 个选项卡时，就会出现这种情况。传递shifting={false}显式禁用此动画，或传递shifting={true}以始终使用此动画。

https://reactnavigation.org/docs/5.x/material-bottom-tab-navigator#shifting