由于 React Native 使用像素或百分比作为单位，我们如何处理大文本输入的可访问性

Posted 2023-03-15

【中文标题】由于 React Native 使用像素或百分比作为单位，我们如何处理大文本输入的可访问性

【英文标题】：Since React Native uses pixels or percentages for units, how do we handle accessibility of larger text for input

【发布时间】：2021-08-19 19:58:02

【问题描述】：

由于 React Native uses only pixels or percentages for units，我们如何处理大文本的可访问性？

我知道我可以disable font scaling，但那是我特别不想做的。

我特意要求TextInput，因为即使您像底部导航栏那样放大，屏幕的其他部分也不会改变。因为假设我们为浏览器上的时间输入设置了一个小部件，我们可以说5em 将其限制为 5 个字符大小，而不管文本的大小。

我能想到的一种方法是使用* 16 代替em，但这在您放大字体时不起作用，因为16 是固定的。

我也在寻找适合世博会的东西。 AccessibilityInfo 似乎没有提供大小，我找不到任何有关访问 Dynamic Type 值的信息

我现在疯狂的想法是有一个透明的Text，我有一个onLayout，我获取组件的大小并将它设置在我所有自定义TextInput将用作@的上下文中987654325@ 基于字符数。

【参考方案1】：

react-native-elements 使用名为normalize 的辅助函数进行字体缩放，实现如下。

import  moderateScale  from 'react-native-size-matters';
function normalize(number, factor = 0.25) 
    return moderateScale(number, factor);

export default normalize

我目前正在使用react-native-size-matters 为多个设备开发用户界面，同时使用react-native-elements 进行上述字体缩放。几乎所有时间都可以正常工作。

查看react-native-size-matters repo 是否对实施有疑问。作者也有一个good article written 来解释他的方法。

【讨论】：

不太正确，因为这涉及基于屏幕的大小调整。但是，它确实让我找到了正确的答案。

是的，我检查了 repo，并寻找了 getFontScale 的调用，但我没有看到它，所以我认为他们没有使用该值。

【参考方案2】：

PixelRatio.getFontScale() 允许您获得根据用户选择的动态类型调整其数量的字体比例。

如果使用动态字体大小，您可以将数字用作宽度的乘数，以根据字体大小增加或减少。

但需要注意的是，与 useColorScheme() 不同，更改大小不会触发重新渲染，因为没有提供包含此信息的上下文。