reactjs - React-native 响应式字体大小

Question

我正在使用 Expo 和 React-Native 开发一个平板电脑应用程序(Android 和 iOS)。

我设法使布局具有响应性，而没有遇到任何问题。在不同尺寸的设备上运行该应用程序后，我注意到我忘记了字体大小响应能力。

我尝试了我能找到的每个 npm 库( react-native-responsive-fontsize 、 react-native-cross-platform-responsive-dimensions 、 react-native-responsive-fontsize )。对于其中任何一个，我都遇到了同样的问题:在应用程序启动时，根据设备的方向，字体大小呈现不同。 (即，如果我在纵向模式下握住设备时打开应用程序，则与在横向模式下打开应用程序时相比，字体大小明显更大 - 横向模式是我的应用程序的默认方向)。 我尝试在启动时将应用程序的屏幕方向锁定为横向，并在安装第一个组件后将其重置为默认值，但这也没有帮助。

我得出的结论是，发生这种情况是因为所有这些库都使用设备的尺寸来生成我传递给它们的内容的原始值，但仅引用一个尺寸(宽度或高度)，该尺寸根据初始设备而不同方向。

我尝试实现自己的解决方案，考虑基于宽度和高度的东西，而不仅仅是其中之一，并且我提出了这个函数:

const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;

export function proportionalSize(size) {
     let aspectRatioSize = width * height;
     let aspectRatioUnit = aspectRatioSize * 0.00001;

     return parseFloat(size) * 0.1 * aspectRatioUnit;
}

这仅适用于我开发应用程序的设备...字体大小在具有不同屏幕尺寸的其他设备上不会保持相同的比例。

我花了足够多的时间修改整个代码的字体大小，尝试在库之间切换。您对我如何克服这个问题有什么想法，或者我错过了什么吗？我最初教导说这将是我最小的问题，但我错了。

后来编辑:我注意到重新加载应用程序后我的问题就消失了。它只发生在第一次渲染时，重新加载后，字体大小就可以正常工作。

Answer 1

我认为基础计算已关闭...我无法让它在手机和平​​板电脑之间干净地缩放，因此我更改了计算以使用基于宽度/高度的纵横比.. .这修复了它在两个设备上显示完全相同的情况。

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width,
  height,
} = Dimensions.get('window');

export function normalize(size, multiplier = 2) {
  const scale = (width / height) * multiplier;

  const newSize = size * scale;

  return Math.round(PixelRatio.roundToNearestPixel(newSize));
}