我想问一下如何react-native句柄或做响应式字体。例如，在 iphone 4s 中，我的字体大小为：14，而在 iphone 6 中，我的字体大小为：18。
React Native 响应式字体大小
IT技术
ios
reactjs
react-native
2021-04-20 02:00:20
6个回答
您可以使用PixelRatio
例如：
var React = require('react-native');
var {StyleSheet, PixelRatio} = React;
var FONT_BACK_LABEL = 18;
if (PixelRatio.get() <= 2) {
FONT_BACK_LABEL = 14;
}
var styles = StyleSheet.create({
label: {
fontSize: FONT_BACK_LABEL
}
});
编辑：
另一个例子：
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 normalize(size) {
const newSize = size * scale
if (Platform.OS === 'ios') {
return Math.round(PixelRatio.roundToNearestPixel(newSize))
} else {
return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
}
}
用法：
fontSize: normalize(24)
您可以通过允许<Text />按预定义大小在每个组件上使用大小来更进一步。
例子：
const styles = {
mini: {
fontSize: normalize(12),
},
small: {
fontSize: normalize(15),
},
medium: {
fontSize: normalize(17),
},
large: {
fontSize: normalize(20),
},
xlarge: {
fontSize: normalize(24),
},
};
我们使用我们编写的简单、直接、可扩展的 utils 函数：
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');
//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;
const scale = size => width / guidelineBaseWidth * size;
const verticalScale = size => height / guidelineBaseHeight * size;
const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;
export {scale, verticalScale, moderateScale};
为您节省一些时间做许多 ifs。您可以在我的博客文章中阅读更多相关信息。
编辑：我认为将这些函数提取到它们自己的 npm 包中可能会有所帮助，我也包含
ScaledSheet在包中，它是StyleSheet. 你可以在这里找到它：react-native-size-matters。
adjustsFontSizeToFit并numberOfLines为我工作。他们将长电子邮件调整为 1 行。
<View>
<Text
numberOfLines={1}
adjustsFontSizeToFit
style={{textAlign:'center',fontSize:30}}
>
{this.props.email}
</Text>
</View>
因为响应式单元目前在 react-native 中不可用，我想说你最好的办法是检测屏幕大小，然后使用它来推断设备类型并有条件地设置 fontSize。
你可以编写一个module，如：
function fontSizer (screenWidth) {
if(screenWidth > 400){
return 18;
}else if(screenWidth > 250){
return 14;
}else {
return 12;
}
}
您只需要查看每个设备的默认宽度和高度。如果在设备改变方向时翻转了宽度和高度，您可能可以使用纵横比，或者只是找出两个维度中较小的一个来计算宽度。
我通过执行以下操作设法克服了这个问题。
为您拥有的当前视图选择您喜欢的字体大小（确保它适合您在模拟器中使用的当前设备）。
import { Dimensions } from 'react-native'并定义组件外部的宽度，如下所示：let width = Dimensions.get('window').width;现在 console.log(width) 并写下来。例如，如果您好看的字体大小是 15，而您的宽度是 360，那么取 360 并除以 15（= 24）。这将是将调整为不同大小的重要值。
在你的样式对象中使用这个数字，如下所示：
textFontSize: { fontSize = width / 24 },...
现在你有了一个响应式 fontSize。