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;