Question

大家好，我使用const {width,height} = Dimensions.get('window');根据屏幕宽度调整了我的字体。这样使用...。

fontSize:width/24

它在iPhone和android设备（如5.5英寸设备）上看起来不错，但在我的Galaxy s9中，它看起来太可怕了，我想根据可自行调整的屏幕设置字体。我该怎么办

Answer 1

那么最好的选择是使用vmax和vmin单位。

vmin：最小边的1/100， vmax：最大边的1/100

看看here

Answer 2

使用这样的响应式库，可以更好地处理事情。

react-native-size-matters

例如：

import { scale, verticalScale, moderateScale } from 'react-native-size-matters';

const Component = props =>
    <View style={{
        width: scale(30),
        height: verticalScale(50),
        padding: moderateScale(5)
    }}/>;

因此，在所有设备上看起来都会更好。使用verticalScale来定义相对于设备高度的内容。缩放比例可用于正常事物。.然后有一个自定义选项mediumScale，您也可以手动定义缩放比例。

有关更多详细信息，请参见：Scaling React Native apps

PS：还有其他选项，您可以在其中手动定义自定义类以获取PixelRatio和所有内容。但这是直接的方法。

引用PixelRatio Approach

Answer 3

要访问设备的像素密度和字体比例，可以根据docs受益于 PixelRatio 。

如文档所述，PixelRatio.get()为您提供设备像素密度：

var dynamic_fontSize = 20;
if(PixelRatio.get() === 1) {  // mdpi Android devices
    dynamic_fontSize = 12; 
} else if(PixelRatio.get() === 1.5) {  // hdpi Android devices
    ... 
}
else { ...

另一个想法是使用roundToNearestPixel()使用布局大小。假设您要调整元素的大小，使其以dp占据屏幕宽度的98％，以dp占据屏幕高度的10％：

export const widthPercentageToDP = widthPercent => {
  const screenWidth = Dimensions.get('window').width;
  // Convert string input to decimal number
  const elemWidth = parseFloat(widthPercent);  
  return PixelRatio.roundToNearestPixel(screenWidth * elemWidth / 100);
};

export const heightPercentageToDP = heightPercent => {
  const screenHeight = Dimensions.get('window').height;
  // Convert string input to decimal number
  const elemHeight = parseFloat(heightPercent); 
  return PixelRatio.roundToNearestPixel(screenHeight * elemHeight / 100);
};

此线程为您提供了一个清晰的示例：https://stackoverflow.com/a/35074379/4687359

根据智能手机React native的屏幕大小调整字体大小

3 个答案: