如何在 React Native 底部标签栏中删除自动字体缩放

Question

我有一个底部标签栏，它是从 @react-navigation/material-bottom-tabs

创建的

在这里，我遇到了底部标签栏标签上的 autoFontScaling 问题。我需要为底部标签栏禁用 autoFontScaling。

这是我在 options 中尝试过的东西：

1:

  tabBarLabel: "HOME",
  tabBarIcon: ({color}: {color: string}) => (
    <Home fill={color} stroke={color} width={24} height={24} />
  ),
  tabBarOptions: {
    allowFontScaling: false
   }

2:

 tabBarLabel: <Text style={{fontSize: 12}} allowFontScaling={false}>HOME</Text>,
  tabBarIcon: ({color}: {color: string}) => (
    <Home fill={color} stroke={color} width={24} height={24} />
  )

两者都没有像我预期的那样工作。

这是我提到的问题的图片，它的文字较大。

Answer 1

我已通过删除整个应用程序中的字体缩放来解决此问题。要完全删除字体缩放，请将此代码粘贴到 App.tsx | APp.js

如果您使用的是 TS:-

interface TextWithDefaultProps extends Text {
    defaultProps?: { allowFontScaling?: boolean };
}

((Text as unknown) as TextWithDefaultProps).defaultProps =
    ((Text as unknown) as TextWithDefaultProps).defaultProps || {};
((Text as unknown) as TextWithDefaultProps).defaultProps!.allowFontScaling = false;

如果您使用的是 JS:-

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;

如何在 React Native 底部标签栏中删除自动字体缩放

How to remove auto fontScaling in react native bottom tab bar

react-native

react-native-navigation

react-native-tabnavigator