如何使用 React Native PixelRatio 实用程序类？答案

【问题标题】：How to use React Native PixelRatio utility class?如何使用 React Native PixelRatio 实用程序类？
【发布时间】：2016-06-24 12:50:20
【问题描述】：

我有一个最初为 iPhone 6 模拟器编写的应用程序，它有一个带有以下示例值的组件：

const styles = StyleSheet.create({
  headerNav: {
    width: 40,
    height: 40
  },
  headerLogoImage: {
    width: 140,
    height: 140
  },
  footerNavText: {
    padding: 15,
    fontSize: 25
  }
});

不幸的是，当我在 iPad 模拟器上启动该应用程序时，尺寸比例完全崩溃了。我知道有类似 PixelRation 的东西，但文档非常有限且不清楚。

任何想法/建议如何使用此 PixelRatio 类将这些宽度/高度/填充和字体大小转换为适当的值？

【问题讨论】：

标签： react-native pixel-ratio

【解决方案1】：

你可以这样做：

footerNavText: {
  padding: PixelRatio.get()*3,
  fontSize: PixelRatio.get()*4
}

检查您希望使用的每个设备的 get() 方法返回什么并相应地设置样式。欲了解更多信息，请访问https://facebook.github.io/react-native/docs/pixelratio.html

【讨论】：

【解决方案2】：

fontSize 需要除以PixelRatio.getFontScale()。这将解释 iOS 和 Android 中不同的屏幕密度。

footerNavText: {
  fontSize: 25 / PixelRatio.getFontScale()
}

https://facebook.github.io/react-native/docs/pixelratio.html

【讨论】：

见文档，只支持安卓