我需要在焦点对准时更改标签的fontSize。我曾尝试过,但没有任何效果。
我找到了“ activeLabelStyle”道具,但不起作用。
谢谢!
我的代码:
export const AppNavigation = () => {
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const MainTabNavigator = () => {
return (
<Tab.Navigator
tabBarOptions={{
labelPosition: "beside-icon",
activeTintColor: "white",
style: {
backgroundColor: "black",
},
labelStyle: {
fontSize: 20,
},
tabStyle: {
fontSize: 10,
},
}}
>
<Tab.Screen name="Main" component={MainScreen} />
<Tab.Screen name="Stats" component={StatsScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
);
};
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Main" component={MainTabNavigator} />
</Stack.Navigator>
</NavigationContainer>
);
};
我发现您可以将“ tabBarIcon”与任何组件一起使用,并使其成为文本=)
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused }) => {
let iconName;
let fontStyle;
let fontSize;
let fontColor;
let unFocusColor = "rgba(255, 255, 255, 0.5)";
let focusSetting = () => {
fontStyle = focused ? "norms-bold" : "norms-regular";
fontColor = focused ? "white" : unFocusColor;
fontSize = focused ? 18 : 17;
};
if (route.name === "stats") {
iconName = "stats";
focusSetting();
} else if (route.name === "main") {
iconName = "main";
focusSetting();
} else if (route.name === "profile") {
iconName = "profile";
focusSetting();
}
return (
<Text
style={{
fontFamily: fontStyle,
fontSize: fontSize,
color: fontColor,
}}
>
{iconName}
</Text>
);
},
})}
tabBarOptions={{
activeTintColor: "white",
tabStyle: {
maxWidth: 70,
},
style: {
alignItems: "center",
paddingRight: "5%",
backgroundColor: "black",
borderTopColor: "rgba(255, 255, 255, 0.35)",
borderTopWidth: 0.5,
},
showLabel: false,
}}
listeners={{
tabPress: Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light),
}}
>
<Tab.Screen name="stats" component={StatsScreen} />
<Tab.Screen name="main" component={MainScreen} />
<Tab.Screen name="profile" component={ProfileScreen} />
</Tab.Navigator>