使用Expo Router Tabs时如何修改Tab的borderTopColor？

问题描述 #

需求是点击Tab一修改Tab一的borderTopColor，点击Tab二修改Tab二的borderTopColor。但尝试在<Tab.Screen />下设置tabBarStyle和监听器时遇到两个问题：

• 仅在Tab一中设置的tabBarStyle会同时作用于所有Tab；
• 监听器里找不到可用的setOptions方法。

原代码：

// (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>
    );
}

解决方案 #

核心问题分析 #

1. tabBarStyle是整个Tab栏的全局样式，不是单个Tab项的样式，所以在单个Screen里设置会覆盖全局，导致所有Tab都应用这个样式。要修改单个Tab项的样式，应该用tabBarItemStyle。
2. Expo Router的Tab监听器里的e.target没有setOptions方法，因为它不是标准的导航器屏幕对象，改用状态管理来动态控制样式更可靠。

修改后的代码 #

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

import React, { useState } 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');
    // 跟踪当前激活的Tab名称
    const [activeTab, setActiveTab] = useState('one');

    return (
        <Tabs
            screenOptions={{
                tabBarActiveTintColor: mainColor,
                tabBarLabelStyle: { fontSize: 20 },
                tabBarStyle: {
                    backgroundColor: tabBackgroundColor,
                },
                tabBarLabelPosition: 'beside-icon',
            }}
            // 点击Tab时更新激活状态
            onTabPress={({ route }) => setActiveTab(route.name)}
        >
            <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')}
                        />
                    ),
                    // 单个Tab项的样式，仅当前激活时显示绿色边框
                    tabBarItemStyle: {
                        borderTopColor: activeTab === 'one' ? 'green' : 'transparent',
                        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')}
                        />
                    ),
                    // 单个Tab项的样式，仅当前激活时显示红色边框
                    tabBarItemStyle: {
                        borderTopColor: activeTab === 'two' ? 'red' : 'transparent',
                        borderTopWidth: 6,
                    },
                }}
            />
        </Tabs>
    );
}

关键说明 #

• 用tabBarItemStyle替代tabBarStyle：这个属性专门控制单个Tab项的样式，不会影响其他Tab，解决了样式全局生效的问题。
• 状态跟踪激活Tab：通过useState记录当前点击的Tab名称，在onTabPress事件里更新状态，然后每个Screen的tabBarItemStyle根据状态动态切换边框颜色，不需要依赖监听器里的setOptions。
• 自定义颜色逻辑：如果需要初始状态下Tab一显示蓝色，点击后变绿色，可以调整状态的初始值和判断逻辑，比如维护一个颜色映射对象，或者在状态里记录每个Tab的当前颜色。

内容的提问来源于stack exchange，提问作者Morton