React Native导航：仅显示焦点项目的选项卡标签

sbdsn5lh 于 2023-05-23 发布在 React

关注(0)|答案(2)|浏览(121)

我只是尝试有条件地显示/隐藏标签导航器的项目标签的基础上，如果他们是重点或没有。我可以像这样更改图标的色调颜色：

tabBarIcon: ({ focused }) => {
   const icon = <Image
     style={{
        width: 25,
        height: 25,
        tintColor: focused ? colors.primary : colors.inactive
     }}
     source={require('./assets/account.png');}
     /> ;

     return icon

但是尝试基于相同的prop有条件地更改showLabel布尔值并不起作用？

tabBarOptions={{
       activeTintColor: colors.primary,
       inactiveTintColor: colors.inactive,
       showLabel: ({ focused }) => {
         return focused ? true : false
       },

标签将显示在选项卡栏上的所有项目。
任何/所有帮助赞赏！

react-native

来源：https://stackoverflow.com/questions/61582081/react-native-navigation-only-show-tab-label-for-focused-item

2条答案

按热度按时间

xxls0lw81#

想明白了

<Tab.Navigator 
      screenOptions={({ route }) => ({
        tabBarLabel: ({ focused }) => {
          return <Text style={{fontSize: 14, fontWeight: '600', color: colors.primary}}>{focused ? route.name : ""}</Text>
        },
        tabBarIcon: ({ focused }) => {
          let iconSource;

          if (route.name === 'Map') {
            iconSource = require('./assets/public.png');
          } else if (route.name === 'List') {
            iconSource = require('./assets/numbered.png');
          } else if (route.name === 'Log') {
            iconSource = require('./assets/menu.png');
          } else if (route.name === 'Talk') {
            iconSource = require('./assets/chat.png');
          } else if (route.name === 'Account') {
            iconSource = require('./assets/account.png');
          } 

          const icon = <Image
            style={{
              width: 25,
              height: 25,
              tintColor: focused ? colors.primary : colors.inactive,
              marginTop: focused ? 5 : 15
            }}
            source={iconSource}
          /> ;

          return icon
        },
      })}
    >

赞(0）回复(0）举报 2023-05-23

qvtsj1bj2#

找到了一个简单的解决方案，只需添加shifting属性或将其分配给true即可

<Tab.Navigator
    ...
    shifting={true}
    ...
>

同样，只在@react-navigation/material-bottom-tabs上测试，所以不能保证在其他选项卡导航上。查看更多here .

赞(0）回复(0）举报 2023-05-23

我来回答

React Native导航：仅显示焦点项目的选项卡标签

2条答案

相关问题

热门标签

最新问答