react-native - 如何使用 React Native PixelRatio 实用程序类？

Question

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

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

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

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

Answer 1

您可以执行以下操作：

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

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

Answer 2

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

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

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