React Native - 如何在字体缩放后检测字体大小？

Question

我需要检测在字体缩放后文本组件的字体大小。假设我的Text组件字体大小是18px。

<Text style={{fontSize: 18}}>My Text</Text>

用户通过操作系统的辅助功能设置了大号字体，导致我的文本以更大的字号呈现（超过18像素）。我知道可以使用allowFontScaling={false}，但是我不想失去文本的可访问性。我发现React Native有一个API可以获取字体比例PixelRatio.getFontScale()，但它在iOS上无法工作。

返回字体大小的缩放因子。这是用于计算绝对字体大小的比率，所以任何严重依赖此值的元素都应该使用它进行计算。

如果没有设置字体缩放比例，则返回设备像素比率。

目前此方法只支持Android，并反映用户在“设置”>“显示”>“字体大小”中设置的首选项；在iOS上，它始终返回默认像素比率。@platform android

你有什么想法？

- 0xori

---

为什么需要在缩放后查找字体大小？ - joshkmartinez

@joshkmartinez 我曾经遇到过一个固定高度和底部边框的情况。文本会被底部边框线吞噬。 - Craig1123

你想在设备字体大小更改时调整字体大小吗？还是希望禁用字体缩放？ - Vinit Bhavsar

Answer 1

react-native-device-info 提供了一个名为 getFontScale() 的函数，该函数似乎在安卓和iOS设备上都能正常运行。

- Pete

Answer 2

您可以使用useWindowDimensions。

import { useWindowDimensions } from 'react-native';

const MyScreen = ({ navigation }) => {
   useWindowDimensions().fontScale // you will get current scale
}

- Ugur

Answer 3

根据文档，PixelRatio.getFontScale()应该适用于Android和iOS。

- S. Souza

---

截至2023年8月，它在iOS和Android上都可以正常工作：https://reactnative.dev/docs/pixelratio#getfontscale - saibbyweb