react-native - 如何使指示器覆盖选项卡而不是相反

Question

了解 reactnative 并知道如何使用 reactnavigation 的人。

我正在创建一个开源应用程序，并在其上使用 MaterialTopTabNavigator。当我对选项卡和指示器进行样式化时（使用 indicatorStyle 和 tabStyle），选项卡会覆盖指示器，使其不可见。有人知道如何解决吗？我想让指示器覆盖选项卡，而不是相反

GitHub 仓库：https : //www.github.com/arthrc/packly src/route.js 第 30~49 行

export default function Routes() {
    return (
        <Tab.Navigator 
        initialRouteName='Home'
        tabBarOptions={{
            activeTintColor: '#fff',
            inactiveTintColor: '#f7f7f7',
            tabStyle: { backgroundColor: '#a500ff'},
            indicatorStyle: {
                height: 6,
                bottom: -3,
                backgroundColor: '#D70CE8',
                width:100,
            },
            labelStyle: {
                fontFamily: 'Inter_600SemiBold',
                fontSize: 16
            }
        }}
        >

标签： react-nativereact-navigation

Answer 1

我只是改变了tabStyle它 style，它工作得很好

最终代码：

export default function Routes() {
    return (
        <Tab.Navigator 
        initialRouteName='Home'
        tabBarOptions={{
            activeTintColor: '#fff',
            inactiveTintColor: '#f7f7f7',
            tabStyle: { backgroundColor: '#a500ff'},
            indicatorStyle: {
                height: 6,
                bottom: -3,
                backgroundColor: '#D70CE8',
                width:100,
            },
            labelStyle: {
                fontFamily: 'Inter_600SemiBold',
                fontSize: 16
            }
        }}
        >