如何设置反应本机元素的尺寸以在不同的设备英寸尺寸中显示相同的尺寸

Question

问题与Same DPI but different inch size十分相似。但这是针对Android的本机反应。

例如，我创建了以下元素。

<View style={{width: 280, height: 300, backgroundColor: '#00B0F0'}}>
</View>

我在不同的设备模拟器中看到了它，一个是320x480px, mdpi, 3.2inch，另一个是480x854px, mdpi, 5.4inch。

每个设备都显示如下。

我认为，由于width和height的使用值为 dp ，因此每个设备的元素实际大小都不同，因为 inch 的大小不同，而不是 dpi 。

我是Web开发人员，在某些情况下，我不得不面对具有本机反应的应用程序。而且设置尺寸的问题非常混乱。

我使用flex吗？喜欢开发响应式网站？或还有其他方法或提示吗？

谢谢。

Answer 1

我创建了一些简单的功能，可以根据屏幕尺寸缩放尺寸。

export const myWidth = Dimensions.get("window").width;
export const myHeight = Dimensions.get("window").height;
const standardWidth = 375.0;
const standardHeight = 667.0;

export function widthScale (dimension) {
    return (dimension / standardWidth) * myWidth;
}

export function heightScale (dimension) {
    return (dimension / standardHeight) * myHeight;
}

设置standardWidth和standardHeight等于zeplin或任何其他设计工具中的窗口名望。在设置水平尺寸（例如with，paddingLeft，paddingRight，marginLeft，marginRight，borderRadius）时，只需调用函数widthScale即可。

并在垂直尺寸中使用heightScale。如果要绘制正方形或圆形，请对两个尺寸都使用widthScale。