React-native响应式字体大小[重复]

Question

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

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

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

我得出的结论是，发生这种情况是因为所有这些库都在使用设备的尺寸来制作我传递给它们的东西的 procentual 值，但只引用一个维度（宽度或高度），这取决于初始设备方向。

我尝试实现我自己的解决方案，考虑基于宽度和高度的东西，而不是仅基于其中一个，我想出了这个功能：

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;
}

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

我浪费了足够多的时间来修改整个代码中的字体大小，试图在库之间切换。你对我如何克服这个有任何想法，或者我错过了什么？我最初教过这将是我最小的问题，但我错了。

稍后编辑：我注意到我的问题在重新加载应用程序后消失了。它只在第一次渲染时发生，并且在重新加载后，font-size 工作正常。

Answer 1

我认为基础计算已关闭...我无法让它在手机和平​​板电脑之间干净地缩放，因此我将计算更改为使用基于 width / height 的纵横比...这修复了它以准确显示两台设备都一样。

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));
}

Answer 2

最好的方法是拥有 2 种比例，一种用于手机，另一种用于平板电脑