React Native 响应式字体大小

Question

我想问一下如何反应原生句柄或做响应式字体。例如在 iphone 4s 我有 fontSize: 14，而在 iphone 6 我有 fontSize: 18。

原文由 Sydney Loteria 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 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),
  },
};

原文由 chinloong 发布，翻译遵循 CC BY-SA 4.0 许可协议