如何使用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 symulator上启动应用程序时,大小比例完全崩溃.我知道像PixelRation这样的东西,但文档非常有限且不清楚.

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

Answer 1

你可以这样做：

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

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