如何在react-navigation/native的Material Top Tabs Navigator 6.x中为活动和非活动选项卡设置不同的指示器颜色？

Question

我正在使用 React Navigation 中的 Material Top Tabs Navigator。这是一个例子：

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

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Chat" component={ChatScreen} />
      <Tab.Screen name="Contacts" component={ContactsScreen} />
      <Tab.Screen name="Albums" component={AlbumsScreen} />
    </Tab.Navigator>
  );
}

默认情况下，仅针对活动选项卡显示选项卡指示器，如下所示：

但是我希望非活动选项卡也有选项卡指示器。这些非活动选项卡指示器应该是不同的颜色，如下所示：

我可以通过向导航器添加

tabBarIndicatorStyle

选项来更改活动选项卡的默认指示器颜色：

<Tab.Navigator
  screenOptions={{ tabBarIndicatorStyle: { backgroundColor: colors.white } }}
>
    <Tab.Screen name="Chat" component={ChatScreen} />
    <Tab.Screen name="Contacts" component={ContactsScreen} />
    <Tab.Screen name="Albums" component={AlbumsScreen} />
</Tab.Navigator>

但是如何设置非活动选项卡的指示颜色？

Answer 1

要设置非活动选项卡下的指示器的样式，需要使用自定义选项卡栏组件，因为默认的createMaterialTopTabNavigator不支持直接为非活动选项卡的指示器设置样式。您可以通过自定义选项卡栏的渲染来实现此目的。

以下是如何创建自定义选项卡栏组件以设置非活动选项卡下指示器样式的示例：

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

function CustomTabBar({ state, descriptors, navigation, position }) {
  return (
    <View style={{ flexDirection: 'row', backgroundColor: 'white' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            key={route.key}
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1, alignItems: 'center', padding: 10 }}
          >
            <Text style={{ color: isFocused ? 'blue' : 'gray' }}>
              {label}
            </Text>
            <View
              style={{
                height: 2,
                backgroundColor: isFocused ? 'blue' : 'gray',
                marginTop: 4,
                width: '100%',
              }}
            />
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

export default CustomTabBar;

您可以像这样使用自定义标签栏：

import React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import ChatScreen from './ChatScreen';
import ContactsScreen from './ContactsScreen';
import AlbumsScreen from './AlbumsScreen';
import CustomTabBar from './CustomTabBar'; // Import the custom tab bar

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator tabBar={props => <CustomTabBar {...props} />}>
      <Tab.Screen name="Chat" component={ChatScreen} />
      <Tab.Screen name="Contacts" component={ContactsScreen} />
      <Tab.Screen name="Albums" component={AlbumsScreen} />
    </Tab.Navigator>
  );
}

export default MyTabs;