Блог

Я хочу изменить цвет тени активной верхней вкладки. Как я могу это сделать? Как и на следующем рисунке, я хочу изменить синий цвет на красный.

Мой Код

 import {Image, View, Text} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import StudyingScreen from './StudyingScreen';
import CollectionScreen from './CollectionScreen';

const Tab = createMaterialTopTabNavigator();

const MyCourses = () => {
  return (
    <View style={{flex: 1, backgroundColor: 'white'}}>
      <Text style={{fontSize: 20, marginLeft: 15, marginBottom: 15}}>
        My Courses
      </Text>
      <Tab.Navigator
        screenOptions={{
          tabBarIndicatorStyle: {backgroundColor: 'red'},
        }}>
        <Tab.Screen name="STUDYING" component={StudyingScreen} />
        <Tab.Screen name="COLLECTION" component={CollectionScreen} />
      </Tab.Navigator>
    </View>
  );
};

export default MyCourses;
 

Там есть супер простая опора, просто внимательно прочитайте документ.

 <Tab.Navigator
  screenOptions={{
    tabBarIndicatorStyle: {backgroundColor: 'red'}
  }}
>
  {/* ... */}
</Tab.Navigator>
 

Пример: https://snack.expo.dev/SiW0Hun-I

Обратите внимание: ваш код кажется правильным, проверьте свою react-navigation версию.