如何在本机中提供支持多设备支持?

时间:2017-10-04 12:52:08

标签: android ios css react-native

说明:

我创建了一个应用程序,它在Android手机(480x320,此类设备)和iPhone 7及以下版本中看起来很好。当我将我的应用程序运行到平板电脑Nexus 7(牛轧糖)时。它减少了我的视图的字体大小,图像甚至高度(在CSS中指定)。

在Android中,我们有不同类型的drawable文件夹,可以根据values文件夹轻松管理多个设备支持。

问题:如何管理我的应用程序,该应用程序将在Android,iPhone和iPad中的手机和桌面等所有设备上运行?

1 个答案:

答案 0 :(得分:1)

你问了这个问题。通过react native元素库,我发现了一个名为normalizeText的函数,你可以在这里找到它:

https://github.com/react-native-training/react-native-elements/blob/master/src/helpers/normalizeText.js

基本上他们采用像素比率api,你可以在这里找到文档: https://facebook.github.io/react-native/docs/pixelratio.html

并且根据屏幕尺寸,他们使用该函数将值/ / height / font乘以0.5到2的值。我发现这是在每个平台上获得良好视觉效果的好方法。

对于UI,我建议您尽可能多地使用flex,因为它可以让您的应用独立于宽度和高度。

如果您需要澄清,请随时发表评论。