更改反应导航材料顶部选项卡中的活动选项卡背景颜色

Question

How can I change the background color of the active tab while using material-top-tabs from React Navigation?

Here's what things look like right now:

• Screenshot 1
• Screenshot 2

Here's my code:

import React from 'react'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import CrurrentOrders from './CrurrentOrders';
import PastOrders from './PastOrders';

const Tab = createMaterialTopTabNavigator();

const OrdersTabs = () => {
    return (
        <Tab.Navigator
            initialRouteName='CrurrentOrders'
            backBehavior='initialRoute'
            tabBarPosition='top'
            swipeEnabled={true}
            swipeVelocityImpact={0.2}
            springVelocityScale={0}
            sceneContainerStyle={{ backgroundColor: '#d1dfff', margin: 10, borderRadius: 20 }}
            style={{ backgroundColor: '#ffffff' }}
            tabBarOptions={{
                activeTintColor: '#ffffff',
                inactiveTintColor: '#ffffff',
                showIcon: true,
                pressColor: '#856',
                scrollEnabled: false,
                tabStyle: { backgroundColor: '#36A7E7', borderRadius: 30, margin: 12, justifyContent: 'center', alignContent: 'center' },
                indicatorStyle: { backgroundColor: '#987', opacity: 0.05 },
                style: { backgroundColor: '#ffffff', borderRadius: 30, margin: 24, height: 72, width: '90%' },
                labelStyle: { fontSize: 14 },

            }}
        >
            <Tab.Screen
                name="CrurrentOrders"
                component={CrurrentOrders}
                options={{
                    title: 'Awsome app',
                    tabBarTestID: 'werwer',
                }}

            />
            <Tab.Screen
                name="PastOrders"
                component={PastOrders}
            />
        </Tab.Navigator>
    )
}

export default OrdersTabs

Answer 1

Like Defined here material-top-tab-navigator/ changed the layer color (text color) of the active tab

For background change, you can do something like

function MyTabBar({ state, descriptors, navigation, position }) {
  return (
    <View style={{ flexDirection: 'row' }}>
      {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 inputRange = state.routes.map((_, i) => i);
        const bgColor = isFocused ? "blue" : "black"; <!-- Here is bg color -->

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}
          >
            <View style={{backgroundColor: bgColor}}>
                <Animated.Text style={{ opacity }}>
                    {label}
                </Animated.Text>
       </View>  
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

Answer 2

Thank you for the link , the hack was in indicatorStyle with activeTintColor

tabBarOptions={{
            activeTintColor: '#ffffff',
            inactiveTintColor: '#36A7E7',
            showIcon: true,
            pressColor: '#9BC9E2',
            scrollEnabled: false,
            tabStyle: {
                borderRadius: 30,
                margin: 12,
                justifyContent: 'center',
                alignContent: 'center'
            },
            indicatorStyle: {
                backgroundColor: '#36A7E7',
                height: '80%',
                borderRadius: 30,
                marginBottom: 8,
                marginLeft: 12,
                width: '45%'
            },
            style: {
                backgroundColor: '#ffffff',
                borderRadius: 36,
                margin: 24,
                height: 76,
                width: '90%'
            },
            labelStyle: { fontSize: 14 },

        }}

enter image description here

Answer 3

I had this exact challenge and was able to solve it by specifying the background color and full height in the indicatorStyle option:

import * as React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import HomeScreen from './HomeScreen';
import AboutScreen from './AboutScreen';
import ContactScreen from './ContactScreen';

const Tab = createMaterialTopTabNavigator();

export default function TopTabs() {
  const tabBarOptions = {
    activeTintColor: 'white',
    inactiveTintColor: 'black',
    indicatorStyle: { backgroundColor: 'red', height: '100%' },
    pressOpacity: 1,
  }

  return (
    <Tab.Navigator tabBarOptions={tabBarOptions}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="About" component={AboutScreen} />
      <Tab.Screen name="Contact" component={ContactScreen} />
    </Tab.Navigator>
  );
}