如何在活动底部选项卡下添加指示器？

Question

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

使用react-navigation v5和createBottomTabNavigator作为底部选项卡。

这是我的代码：

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

提前致谢！

Answer 1

如果有人需要仅使用底部选项卡栏来实现此目的，我自己通过制作自定义选项卡栏图标来解决这个问题。

这是代码。

<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这些道具。

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