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

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

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

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

Answer 1

你可以使用这个功能

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

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

// based on iphone 5s's scale
const scale = SCREEN_WIDTH / 320;

export function actuatedNormalize(size) {
  const newSize = size * scale
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
  }
}

并使用

fontSize: actuatedNormalize(12)

Answer 2

我认为基础计算已关闭......我无法在手机和平​​板电脑之间清晰地缩放所以我更改了计算以使用基于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 3

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