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

React-native响应字体大小

2 个答案: