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

这只适用于我开发应用的设备...在其他屏幕尺寸不同的设备上，字体大小将无法保持相同的比例。

我花费了足够多的时间修改整个代码中的字体大小，试图在库之间进行切换。你有任何想法可以帮我解决这个问题吗？或者我错过了什么？我最初认为这是我最小的问题，但我错了。

后来编辑：我注意到重新加载应用程序后，我的问题就消失了。它只发生在首次呈现时，在重新加载之后，字体大小正常工作。

- john doe

---

你为什么不想在CSS中使用“rem”而是使用“px”呢？ - foxtrotuniform6969

@nbaughman - 因为像px和rem这样的单位在react-native中不可用。当然，有很多包可以实现它们，但从我的经验来看，它们并不总是按预期工作。 - john doe

啊，糟糕，我知道了。 - foxtrotuniform6969

这个回答解决了你的问题吗？React Native响应式字体大小 - Lorenzo Imperatrice

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

- Timmerz

Answer 2

最好的方法是使用两个比例尺，一个用于手机，另一个用于平板电脑

- Mustafa Bayati

---

这种方式很难维护。 - Vasyl Nahuliak