TextInput 允许字体缩放 false

Posted 2023-04-18

【中文标题】TextInput 允许字体缩放 false

【英文标题】：TextInput allow font scaling false

【发布时间】：2018-04-29 16:02:01

【问题描述】：

我正在使用 React Native 构建一个应用程序。问题是，当通过手机设置更改字体大小时，应用程序中的字体大小也会发生变化，即使它们都设置了固定的字体大小。

例如，考虑以下字体大小为 12 的 Text 元素：

<Text style=fontSize: 12>Hello World</Text>

我发现这个问题有一个名为 allowFontScaling 的道具。所以，我转到 App.js 并添加以下行以禁用整个应用程序的字体缩放：

Text.defaultProps.allowFontScaling = false;

完美运行。但是，TextInput 元素似乎没有实现相同的道具。当我尝试对TextInput 执行相同操作时，我收到以下错误：

undefined 不是一个对象（评估 '_reactNative.TextInput.defaultProps.allowFontScaling = false')

因此，我可以为Text 设置一个固定的字体大小，而不是TextInput。这个问题有什么解决方法吗？我的 react-native 版本是 0.48.4。

提前致谢。

【问题讨论】：

在TextInput 上尝试<TextInput allowFontScaling=false>，看看它是否适用于特定的TextInput？来源：facebook.github.io/react-native/releases/next/docs/…

@IshitaSinha 我认为他试图避免将其添加到整个应用程序的 500 个文本组件中

@A.com 显然。检查是否单独添加它只是调试问题所在的一种方法。根据 docs allowFontScaling 是一个有效的 TextInput 道具，所以它应该可以工作。如果是这样，我会要求他这样做：TextInput.defaultProps = allowFontScaling: false ;

TextInput.defaultProps = allowFontScaling: false ; 对我来说就像一个魅力。

TextInput.defaultProps = ...(TextInput.defaultProps || ), allowFontScaling: false 从这里：github.com/facebook/react-native/issues/…

【参考方案1】：

解决此问题的简单方法是在我的 App.js 文件顶部添加以下代码：

Text.defaultProps = 
  ...(Text.defaultProps || ),
  allowFontScaling: false,
;
TextInput.defaultProps = 
  ...(TextInput.defaultProps || ),
  allowFontScaling: false,
;

干杯。

【讨论】：

谢谢，它在 RN 0.64 上运行良好

【参考方案2】：

由于“TextInput”的 allowFontScaling 属性在 android 上不起作用，ios 和 android 的解决方法是 -

从 react-native 导入 PixelRatio 在 TextInput 样式中将 fontSize 设置为 intendedFontSize / PixelRatio.getFontScale()

它会修复你的 fontSize 并且不会因为系统设置而改变

【参考方案3】：

您可以将此代码添加到您的 app.js 文件中。这是在 .jsx 文件中使用的有效方法，而不是 .ts

useEffect(() => 
    Text.defaultProps = Text.defaultProps || ;
    Text.defaultProps.allowFontScaling = false;
    TextInput.defaultProps = TextInput.defaultProps || ;
    TextInput.defaultProps.allowFontScaling = false;
    View.defaultProps = View.defaultProps || ;
    View.defaultProps.allowFontScaling = false;
  , [])