React Native：如何管理 9000 种 Android 屏幕尺寸？答案

【问题标题】：React Native: How do I manage the 9000 Android screen sizes?React Native：如何管理 9000 种 Android 屏幕尺寸？
【发布时间】：2016-03-13 03:04:55
【问题描述】：

在过去的 6 个月里，我刚刚使用 React native 为 iOS 和 Android 构建了一个极其复杂的应用程序。

一切都很完美，一切都很好......

我使用我编写的一个特殊组件为 iPhone 4s、5、6、6+ 设计，它的工作原理基本上...

override: {
  ip4: { fontSize: 8 },
  ip5: { fontSize: 10 }
}

等等

这对 iOS 来说实际上是完美。

今天我打开了 GA，很害怕意识到我忘记设置 Android 样式了。我查看了我们的 Google 分析结果，确实有... 700 个屏幕尺寸各不相同。

我对设计所有这些的前景感到完全困惑，尤其是考虑到多个像素密度。

我的问题是，我实际上应该做些什么来解释...

边距/间距（基本上是用于填充或其他的通用整数）
字体大小

这两件事我很困惑如何处理所有不同的组合。

我看过PixelRatio，但我不知道如何使用它，或者即使我在正确的轨道上。

大多数人是如何处理这个问题的？

【问题讨论】：

对此进行了复查，希望有一个明智的答案。你找到解决办法了吗？

标签： android react-native

【解决方案1】：

您可以同时使用Dimensions 和PixelRatio 来获取屏幕尺寸和像素。例如，我使用它来根据屏幕大小设置图像大小..

例如：

import Dimensions from 'Dimensions';
import PixelRatio from 'PixelRatio';

var {height, width} = Dimensions.get('window');
var pixelr = PixelRatio.get();

// Calculate styles, heights, fontsizes based on the numbers above

【讨论】：

你能完成答案吗，没有人真正知道如何在iOS和Android上使用PixelRatio。你自己做过吗？
@SudoPlz 只需乘以 pixelr。

【解决方案2】：

您可以使用媒体查询来管理多种屏幕尺寸，我在开发的早期阶段在我的 phonecap (cordova) 中使用媒体查询概念。

我在搜索的时候找到了教程，我觉得很有帮助，

https://www.npmjs.com/package/react-native-responsive

【讨论】：

【解决方案3】：

我们结束了在应用程序周围使用弹性框的做法。因此，当空间可用时，内容会自行容纳。

当然，我们花了一整天的时间尝试和测试

【讨论】：