在多个设备上反应原生常量布局答案

【问题标题】：React Native Constant Layout on Multiple Devices在多个设备上反应原生常量布局
【发布时间】：2020-03-26 13:48:23
【问题描述】：

我有一个最小的应用程序，其中包含基本视图、文本、图像和按钮的原生反应。我面临的问题是管理多个设备的布局。关于如何为多个设备（多种屏幕分辨率和屏幕尺寸）保持相同（成比例）视图和字体大小的任何建议。

查看：例如，如果我想要一个项目列表视图，其中每一行左侧有一个图像，中间有一些文本，右侧有 2 个按钮（一个在另一个下方，即flex-direction: 'column'），我怎样才能让它看起来不错5" 设备和 10" 设备一样吗？

另外，考虑到按钮有一些borderRadius，如果我们缩放按钮，borderRadius 的值也需要增加。我如何做到这一点？

字体：我曾尝试使用PixelRatio.getFontScale()，但这仅取决于分辨率（据我所知）缩放字体。使用它，使 12 号字体在分辨率较高的 5 英寸设备上看起来更大，而在分辨率较低的 10 英寸设备上看起来更小。那么如何管理 react native 应用的字体大小呢？

【问题讨论】：

标签： layout react-native

【解决方案1】：

除了PixelRatio.getFontScale()，您还可以使用Dimensions API 来获取窗口的高度和宽度，并相对于它缩放您的组件。我已经构建了一个在 iOS 和 android 上运行的应用程序，并使用它来缩放宽度的 + 高度。

查看链接Dimensions @ Facebook - React Native

即。

Dimensions.get('window').width; Dimensions.get('window').height;

将返回窗口的大小

【讨论】：

能否请您详细说明如何使用两者？我曾尝试单独使用它们，但没有得到预期的结果。
This Medium post 很好地描述了使用Dimensions API根据设备宽度修改布局。

【解决方案2】：

这个图书馆怎么样？ react-native-scaled-layout

您可以为布局边距、高度、内边距使用缩放尺寸...

(36).scaled() /* or */ (36).d() 

(36).widthScaled() /* or */ (36).w()

(36).heightScaled() /* or */ (36).h()

(24).fontScaled() /* or */ (24).f()

style={{
    width: (100).w(),
    height: (210).h() + safeAreaBottom,
    borderRadius: (16).d(),
    justifyContent: 'center',
    paddingBottom: safeAreaBottom + (24).h(),
}}

【讨论】：