react-native - 如何更改活动顶部选项卡的阴影颜色

Question

我想更改活动顶部选项卡的阴影颜色。我怎样才能做到这一点？如下图，我想把蓝色变成红色。

我的代码

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;

Answer 1

那里有一个超级简单的道具，只需仔细阅读文档即可。

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

示例：https ://snack.expo.dev/SiW0Hun-I

注意：您的代码似乎正确，请检查您的react-navigation版本。