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这样的东西，但文档非常有限且不清楚。

任何想法/建议如何翻译这些宽度/高度/填充＆amp;使用此PixelRatio类将fontSize设置为正确的值？

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

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

2 个答案: