react-native - 如何在焦点 react 导航中更改 TabBar 标签的字体大小？

Question

当标签处于焦点时，我需要更改标签的字体大小。我试过了，但没有任何效果。

我找到了“activeLabelStyle” Prop ，但它不起作用。

谢谢!

我的代码:

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

Answer 1

我发现您可以将“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>