Question

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

查看：例如，如果我想要一个项目的列表视图，其中每行左边有一个图像，中间有一些文本，右边有两个按钮（一个在另一个下面，即flex-direction: 'column'），我怎么能有这个在5＆＃34;设备以及10＆＃34;设备

另外，考虑按钮有一些borderRadius，如果我们缩放按钮，还需要增加borderRadius值。我如何实现这一目标？

字体：我尝试过使用PixelRatio.getFontScale()，但这会根据分辨率（根据我的理解）来缩放字体。使用它，使得大小为12的字体在5＆＃34; 10＆＃34;更高分辨率，更小的设备分辨率较低的设备。那么如何管理react native应用程序的字体大小呢？

Answer 1

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

结帐链接Dimensions @ Facebook - React Native

即

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

将返回窗口大小

Answer 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(),
}}

在多个设备上实现原生常量布局

2 个答案: