本文介绍了反应原生响应字体大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 我想问一下native native如何处理或响应字体。例如在iphone 4s中我有fontSize:14,而在iphone 6中我有fontSize:18。解决方案你可以用 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 } }); 修改: 另一个例子: 从'react-native导入{Dimensions,Platform,PixelRatio} ; const { width:SCREEN_WIDTH, height:SCREEN_HEIGHT,} = Dimensions.get('window'); //基于iphone 5s的比例 const scale = SCREEN_WIDTH / 320; 导出函数规范化(大小){ if(Platform.OS ==='ios'){返回Math.round(PixelRatio.roundToNearestPixel(size))} else {返回Math.round(PixelRatio.roundToNearestPixel(size)) - 2 } } 用法: fontSize:normalize(24) < Text /> 预定义大小的组件。 示例: const styles = { mini:{ fontSize:normalize(12),}, small:{ fontSize:normalize(15), },中:{ fontSize:normalize(17),}, large:{ fontSize:normalize(20),}, xlarge:{ fontSize:normalize(24),},}; I would like to ask how react native handle or do the responsive font. For example in iphone 4s i Have fontSize: 14, while in iphone 6 I have fontSize: 18. 解决方案 You can use PixelRatiofor example: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 }});Edit:Another example:import { Dimensions, Platform, PixelRatio } from 'react-native';const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT,} = Dimensions.get('window');// based on iphone 5s's scaleconst scale = SCREEN_WIDTH / 320;export function normalize(size) { if (Platform.OS === 'ios') { return Math.round(PixelRatio.roundToNearestPixel(size)) } else { return Math.round(PixelRatio.roundToNearestPixel(size)) - 2 }}Usage:fontSize: normalize(24)you can go one step further by allowing sizes to be used on every <Text /> components by pre-defined sized.Example:const styles = { mini: { fontSize: normalize(12), }, small: { fontSize: normalize(15), }, medium: { fontSize: normalize(17), }, large: { fontSize: normalize(20), }, xlarge: { fontSize: normalize(24), },}; 这篇关于反应原生响应字体大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
06-27 14:08