android - 在 Android-React native 中处理不同屏幕尺寸的问题

Question

我对为应用程序处理不同大小的屏幕有点困惑。

在 android 中有一个名为 dp 的单元这似乎可以处理屏幕尺寸和分辨率变化。我希望当我使用这个单位而不是像素时，我会看到相同的大小 component (如按钮，...)在每个屏幕。例如，大小为 20dp 的按钮必须在所有屏幕上看起来都相同。

在我读到 React-Native 使用 dp 的文章中也作为它的主要单位。所以在这里期待同样的事情，但它没有像我预期的那样工作。带有 20dp 的按钮在不同的屏幕上看起来不一样。

还有一些文章展示了如何处理不同的屏幕尺寸，尽管他们说 RN 使用 dp他们使用一些算术逻辑将其组件缩放到每个屏幕尺寸。

例如 const scaleX = Dimension.getWidth() / baseWdith => 简化代码

流程是，我们制作一个带有特定基本屏幕的 UI，让它看起来像我们想要的那样，然后我们稍后在新屏幕中缩放组件。

我的问题是这不是 dp单位应该做同样的事情!？为什么 RN 不自己处理自动缩放？如果有某物名为dp管理屏幕尺寸比例那么他们为什么要手动缩放？

Answer 1

在 RN 中，我们不使用 dp 作为缩放单位。我们必须做自己的逻辑来管理不同的屏幕尺寸。我用百分比缩放创建了自己的缩放机制。
下面是计算不同屏幕大小的常用函数

 import { Dimensions, PixelRatio } from 'react-native';
const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;
const widthDP = widthPercent => {
    // Convert string input to decimal number
    const elemWidth = parseFloat(widthPercent);
    return PixelRatio.roundToNearestPixel(screenWidth * elemWidth / 100);
};
const heightDP = heightPercent => {
    // Convert string input to decimal number
    const elemHeight = parseFloat(heightPercent);
    return PixelRatio.roundToNearestPixel(screenHeight * elemHeight / 100);
};

您可以在任何屏幕中使用如下这些功能

  const style = StyleSheet.create({
    container: {
        padding: 2,
        width: widthDP('69.60%'),
        height: heightDP('100%),
    },
    textStyle: {
        textAlign: "center",
        fontSize: widthDP('3.70%'),
        color: '#000000',
    },
})

您可以使用下面的示例表进行 dp 到百分比的转换

 HEIGHT:

5:heightDP('0.80%'),
7:heightDP('1.05%'),
8:heightDP('1.2%')
9:heightDP('1.35%'),
10: heightDP('1.5%'),
11:heightDP('1.60%'),
12:heightDP('1.8%'),
14:heightDP('2.12%'),
15:heightDP('2.25%'),
17:heightDP('2.50%'),
18:heightDP('2.65%'),
19:heightDP('2.80%'),
20: heightDP('2.95%') //
22:heightDP('3.25%'),
24:heightDP('3.5%'),,
25:heightDP('3.66%'),
29:heightDP('4.27%'),
30:heightDP('4.4%'),
31:heightDP('4.58%')
33:heightDP('4.25%'),
35:heightDP('5.15%')
36: heightDP('5.30%')//
39:heightDP('5.75%'),
40:heightDP('5.9%'),
42:heightDP('6.2%'),
48:heightDP('7%'),
50:heightDP('7.35%'),
52:heightDP('7.62%')//
55:heightDP('8.10%'),
64:heightDP('9.40%'),
65:heightDP('9.52%'),
66:heightDP('9.66%'),
67:heightDP('9.80%')
71.6:heightDP('10.50%')
72:heightDP('10.55%')//
76:heightDP('11.15%'),
83:heightDP('12.20%')//
90:heightDP('13.19%'),
91:heightDP('13.35%'),
105:heightDP('15.36%')
109:heightDP('16.00%'),
123:heightDP('18%')
136.7:heightDP('20%')
140:heightDP('20.50%')//
174:heightDP('25.5%'),
190:heightDP('27.88%'),
194:heightDP('28.42%'),
209:heightDP('30.59%')
222:heightDP('32.50%')
224:heightDP('32.80%')//
230:heightDP('33.70%'),
246:heightDP('36%'),
265:heightDP('38.8%'),

328heightDP('48%')
334:heightDP('49%')//
341:heightDP('50%')//
344:heightDP('50.40%')
348:heightDP('51%')
355:heightDP('52%')
409:heightDP('60%'),
423:heightDP('62%')
434:heightDP('63.55%'),


WIDTH:


5:widthDP('1.25%'),
7:widthDP('1.80%')v
8:widthDP('1.99%'),
9:widthDP('2.2%'),
10:widthDP('2.5%'),
12:widthDP('3.0%'),
13:widthDP('3.2%'),
14:widthDP('3.5%'),
15:widthDP('3.70%'), 
16:widthDP('3.90%')//
17:widthDP('4.20%'),
18:widthDP('4%'),
18:widthDP('4.4%'),
20:widthDP('4.83%'),
22:widthDP('5.4%'),
24:widthDP('5.8%'),
26:widthDP('6.40%'),
29:widthDP('7.1%'),
30:widthDP('7.30%'),    
39:widthDP('9.50%'),
40:widthDP('9.80%')
44:widthDP('10.70%'),
45:widthDP('11.00%'),
48:widthDP('11.70%')//
60:widthDP('14.50%')
64:widthDP('15.65%'),
68.5:widthDP('16.7%')
70:widthDP('17.2%')

72:widthDP('17.55%')

75:widthDP('18.30%')
76:widthDP('18.65%')
80: widthDP('22%')
273:widthDP('66.40%'),
286:widthDP('69.60%'),
315:widthDP('76.70%'),
335:widthDP('81.5%'),

WidthDP(1)= 4.190476190476191

HeightDP(1)= 6.857142857142857