如何在活动底部选项卡下添加指标? [英] How to add an indicator under the active bottom tab?

问题描述

我需要为活动选项卡添加一个指示器，我尝试使用 tabStyle 添加一个 borderBottom，但我们无法使用它来检查焦点.

I need to add an indicator for the active tab I tried to add a borderBottom with tabStyle but we can't check focused with that.

使用 react-navigation v5 和 createBottomTabNavigator 作为底部标签.

Using react-navigation v5 and createBottomTabNavigator for bottom tabs.

这是我的代码:

<BottomTab.Navigator
      tabBarOptions={{
        activeTintColor: colors.brown,
        labelPosition: 'below-icon',
      }}>
      <BottomTab.Screen
        name="Home"
        component={HomeTabNav}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({focused}) => {
            return focused ? (
              <HomeSelectedIcon height={ms(24)} width={ms(24)} />
            ) : (
              <HomeIcon height={ms(24)} width={ms(24)} />
            );
          },
        }}
      />
     ...
    </BottomTab.Navigator>
  );
};

提前致谢！

推荐答案

如果有人需要仅使用底部标签栏来实现这一点，我自己通过制作自定义标签栏图标来解决这个问题.

I figured it out myself by making a custom tabbar icon if someone needs to achieve this using the bottom-tab bar only.

这是代码.

<BottomTab.Navigator
      tabBarOptions={{
        activeTintColor: colors.brown,
        showLabel: false,
        tabStyle: styles.tabStyle,
        style: styles.tabContainerStyle,
      }}>
      <BottomTab.Screen
        name="Home"
        component={HomeTabNav}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({focused}) => {
            return focused ? (
              <View style={styles.labelFocusedContainer}>
                <HomeSelectedIcon height={24} width={24} />
                <Text style={styles.labelFocusedStyle}>Home</Text>
              </View>
            ) : (
              <View style={styles.labelContainer}>
                <HomeIcon height={24} width={24} />
                <Text style={styles.labelStyle}>Home</Text>
              </View>
            );
          },
        }}
      />
   ...
</BottomTab.Navigator>

const styles = StyleSheet.create({
  labelContainer: {
    alignItems: 'center',
    width: '100%',
  },
  labelFocusedContainer: {
    alignItems: 'center',
    width: '100%',
    borderBottomWidth: 3,
    borderBottomColor: colors.brown,
  },
  labelFocusedStyle: {
    textAlign: 'center',
    marginVertical: 8,
    color: colors.brown,
    backgroundColor: 'transparent',
    fontSize: 10,
  },
  labelStyle: {
    textAlign: 'center',
    marginVertical: 8,
    color: colors.veryDarkgray,
    backgroundColor: 'transparent',
    fontSize: 10,
  },
});

但最好和最简单的方法是使用 createMaterialTopTabNavigator 并使用这些道具.

But the best and easy way to do this is by using createMaterialTopTabNavigator and using these props.

tabBarPosition="bottom"
      tabBarOptions={{
        showIcon: true,
        pressOpacity: 1,
        iconStyle: styles.iconStyle,
        showLabel: true,
        activeTintColor: colors.brown,
        indicatorStyle: {
          borderWidth: 2,
          borderColor: colors.brown,
        },

这篇关于如何在活动底部选项卡下添加指标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！