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

Question

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

底部标签使用 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

这似乎无法通过底部标签轻松实现，但您可以使用 material 版本 - @react-navigation/material-top-tabs 并配置它以满足您的需求，特别是使用 tabBarPosition="bottom" 和 tabBarOptions={{ indicatorStyle: { backgroundColor } }}.

您可以在文档中查看更多选项：https://reactnavigation.org/docs/material-top-tab-navigator/#tabbaroptions

import * as React from 'react';
import { Text, View } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tabs = createMaterialTopTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tabs.Navigator tabBarPosition="bottom" tabBarOptions={{ indicatorStyle: { backgroundColor: 'red' } }}>
        <Tabs.Screen name="screen 1" component={View} />
        <Tabs.Screen name="screen 2" component={View} />
      </Tabs.Navigator>
    </NavigationContainer>
  );
}

Answer 2

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

这是代码。

<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,
        },

Answer 3

最好的答案是使用 tabBarButton 属性覆盖并将您自己的自定义样式添加到选项卡按钮的容器中。

https://reactnavigation.org/docs/bottom-tab-navigator#tabbarbutton

const CustomTabButton = (props) => (
    <Pressable
        {...props}
        style={
            props.accessibilityState.selected
                ? [props.style, styles.activeTab]
                : props.style
        }
    />
)

styles.activeTab 是你要添加的自定义样式，注意展开 props.style 以从库中获取默认样式，如宽度、填充、高度等

props.accessibilityState.selected 将根据条件添加样式，如果您想要所有选项卡的样式，您可以删除条件。

在导航器的 screeenOptions 道具或每个屏幕的 option 道具中。

tabBarButton: CustomTabButton

使用 material 顶部选项卡不是一个好的解决方案，因为它不能很好地支持键盘。但底部标签确实可以与键盘配合使用。

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

How to add an indicator under the active bottom tab?

react-native

react-navigation

react-navigation-bottom-tab