ReactNative适配探讨

Posted 2023-03-01

参考技术A

px(CSS pixels) : 逻辑像素，浏览器使用的抽象单位，多用于css样式单位，通常也是设计师使用的单位。
dp(device pixels) : 设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位为pt(以下为了清晰暂用dp代替)。pt在css单位中属于真正的绝对单位，1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米。
dpr(devicePixelRatio) : 设备像素缩放比。计算公式：dpr = dp/px；1px=dpr*dpr*dp(px是个正方形，长*宽);

Reactnative中使用dp为单位

例：
iphone6宣称的分辨率是750*1334，这里指的是物理像素，但是在模拟器上显示出来的却是宽375像素(CSS逻辑像素)，iphone6的375px*667px就是因为它的dpr等于2。此时一个css像素就会占据四个物理像素的位置，在x轴方向占两个，在y轴方向占两个。

通常我们的设计师会以iphone6为设计稿，也就是375px*667px进行设计，此时如果我们使用iphone6(375dp*667dp)进行开发显示：
严谨的说在单一方向上，如水平方向 1px=1dp,375px=375dp(也是宽度满屏)

但如果我们在设备像素不等于(375dp*667dp)的设备上，例如iphone6s Plus(414dp*736dp)，
我们设置

至此，问题浮现，我需要一个适配转换方法，使设计稿上的375px就是满屏，显示到任意设备像素的屏幕上还是满屏。
方法原理：
虽然单位不同，但是元素所占屏幕宽度的比例是相同的
利用元素所占屏幕比例不变的特性，来将 px 转为 dp（这样实现屏幕适配的话，在不同尺寸的屏幕下，元素会等比放大或缩小）
公式如下：
设计稿元素宽度（px） / 设计稿总宽度（px） = 元素的宽度（dp） / 屏幕的总宽度（dp）
我们要求的就是 元素的宽度（dp）
可以得出：
元素的宽度（dp,这是我们最后得到写到程序里的数值） = 设计稿元素宽度（px）* 屏幕的总宽度（dp） / 设计稿总宽度（px）
放到ReactNative里实现

在确定了转换方法以后，我们只需在设置长度时调用转换方法即可

此处的异形屏多指刘海屏，水滴屏，异形屏的statusbar(也就是显示信号，电量的顶部行)的高度会比正常的屏幕要高一些。
ReactNative官方给了一个解决方法：
SafeAreaView 会自动根据系统的各种导航栏、工具栏等预留出空间来渲染内部内容。更重要的是，它还会考虑到设备屏幕的局限，比如屏幕四周的圆角或是顶部中间不可显示的“刘海”区域。
至此你的刘海屏的问题会得到解决,但是SafeAreaView只在ios生效，android还得使用StatusBar组件( https://reactnative.cn/docs/statusbar )获取statusbar的高度，再进行适配,这样就可以完成双端的适配。

具体链接： https://reactnative.cn/docs/safeareaview

为方便观察，我将顶部tab变成了淡黄色长裙的背景，效果图如下，左边是iphone6sp，右边是iphone11

另外安卓设置translucent了后，statusbar的高度就没了，你需要手动去加上状态栏的高度例如

由于安卓设备短缺，只用一台小米平板进行展示，平板上的适配还需再研究，在此只展示沉浸效果，如下图：

鄙人根据开发实践总结了几点：
1.需要宽高全屏显示容器的需要适配，如下图情况，上下两部分构成铺满全屏，此时需要宽高适配。不适配的话，在较长屏幕上会有大量下方留白

2.列表项宽度容器适配，高度不适配，对于一些展示的列表项，我们通常会适配宽度，高度不进行适配拉伸,下方留白由机型高度决定。如果高度进行拉伸适配的话，会和设计稿出入较大，显得很不协调，

3.不确定高度容器，宽度适配，高度不设置，有子元素决定高度，如下图的弹出层，我们无法确定白色容器在各种机型（有的机型会比设计稿高度还低）多少高度能显示下这些元素，所以我们不设置高度，或者只设置一个minHeight即可

**篇幅较长，谢谢阅读，个人见解，欢迎指正讨论.