使用expo路由器选项卡时如何更改选项卡边框顶部颜色？

Question

用户按选项卡一将更改选项卡一

borderTopColor

同时按选项卡二将更改选项卡二

borderTopColor

我尝试在

下设置tabBarStyle和监听器

我的问题是

tabBarStyle

效果一和二，事件我只是将其设置在选项卡一中。

并且没有

setOptions

我可以在

listeners

中使用

这是我的选项卡设置：

// (app)/(tabs)/_layout.tsx


import React from 'react';
import { Image } from 'react-native';
import { Tabs } from 'expo-router';
import useThemeColor from '@/common/hooks/useThemeColor';

export default function TabLayout() {
    const mainColor = useThemeColor('mainColor');
    const tabBackgroundColor = useThemeColor('tabBackgroundColor');

    return (
        <Tabs
            screenOptions={{
                tabBarActiveTintColor: mainColor,
                tabBarLabelStyle: { fontSize: 20 },
                tabBarStyle: {
                    backgroundColor: tabBackgroundColor,
                },
                tabBarLabelPosition: 'beside-icon',
            }}
        >
            <Tabs.Screen
                name="one"
                options={{
                    title: 'Tab One',
                    headerShown: false,
                    tabBarIcon: ({ color }) => (
                        <Image
                            tintColor={color}
                            resizeMode="contain"
                            style={{ width: 26, height: 26 }}
                            source={require('@/assets/images/group.png')}
                        />
                    ),
                    tabBarStyle: { borderTopColor: 'blue', borderTopWidth: 6 },
                }}
                listeners={{
                    tabPress: e => {
                        console.log('tabPress', e);
                        e.target.setOptions({ tabBarStyle: { borderTopColor: 'green', borderTopWidth: 6 } });
                    },
                }}
            />
            <Tabs.Screen
                name="two"
                options={{
                    title: 'Tab two',
                    headerShown: false,
                    tabBarIcon: ({ color }) => (
                        <Image
                            tintColor={color}
                            resizeMode="contain"
                            style={{ width: 26, height: 26 }}
                            source={require('@/assets/images/vector.png')}
                        />
                    ),
                }}
            />
        </Tabs>
    );
}

Answer 1

您可以使用 borderTopWidth: 0 或 borderTopColor: "transparent":

 <Tabs
        screenOptions={{
            tabBarActiveTintColor: mainColor,
            tabBarLabelStyle: { fontSize: 20 },
            tabBarStyle: {
                backgroundColor: tabBackgroundColor,
                borderTopWidth: 0,
                borderTopColor: "transparent"
            },
            tabBarLabelPosition: 'beside-icon',
            
        }}
    >