反应原生响应字体大小 [英] React Native Responsive Font Size

问题描述

我想问一下native native如何处理或响应字体。例如在iphone 4s中我有fontSize：14，而在iphone 6中我有fontSize：18。

解决方案

你可以用< a href =https://facebook.github.io/react-native/docs/pixelratio.html\"rel =noreferrer> 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 PixelRatio

for 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 scale
const 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),
  },
};


                        
这篇关于反应原生响应字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！