用户按选项卡一将更改选项卡一
borderTopColor
同时按选项卡二将更改选项卡二borderTopColor
我尝试在
我的问题是
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>
);
}
您可以使用 borderTopWidth: 0 或 borderTopColor: "transparent":
<Tabs
screenOptions={{
tabBarActiveTintColor: mainColor,
tabBarLabelStyle: { fontSize: 20 },
tabBarStyle: {
backgroundColor: tabBackgroundColor,
borderTopWidth: 0,
borderTopColor: "transparent"
},
tabBarLabelPosition: 'beside-icon',
}}
>