1.适配前置知识

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为单位

someStyle:{
  width:375,//这里的375代表375dp；
}

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

2.适配问题

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

someStyle:{
  width:375,//设计稿里宽度为375，我们在这里设置width:375,代表375dp,此时dp与px等价，都是宽度上满屏
}

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

someStyle:{
  width:375,//设计稿里宽度为375，我们在这里设置width:375,代表375dp,但是我们的屏幕实际为414dp，就不能铺满全屏。
}

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

const { width: screenW, height: screenH } = Dimensions.get('window'); //获取当前的设备的设备像素
// px转换成dp
// 以iphone6为基准,如果以其他尺寸为基准的话,请修改下面的defaultWidth和defaultHeight为对应尺寸即可. 以下为1倍图时
const defaultWidth = 375;
const defaultHeight = 667;
// 缩放比例
const _scaleWidth = screenW / defaultWidth;
const _scaleHeight = screenH / defaultHeight;
/**
 * 屏幕适配,缩放size , 默认根据宽度适配，纵向也可以使用此方法
 * 横向的尺寸直接使用此方法
 * 如：width ,paddingHorizontal ,paddingLeft ,paddingRight ,marginHorizontal ,marginLeft ,marginRight
 * @param size 设计图的尺寸
 * @returns {number}
 */
// sh  =》 scaleHorizontal
function sh(size) {
  return size * _scaleWidth;
}

/**
 * 屏幕适配 , 纵向的尺寸使用此方法应该会更趋近于设计稿
 * 如：height ,paddingVertical ,paddingTop ,paddingBottom ,marginVertical ,marginTop ,marginBottom
 * @param size 设计图的尺寸
 * @returns {number}
 */
// sv  =》 scaleVertical
function sv(size) {
  return size * _scaleHeight;
}

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

someStyle: {
    width: sh(44),
    height: sv(27),
    marginTop: sv(22),
    marginBottom: sv(48),
  }

3.异形屏的适配

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

StatusBar.currentHeight

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

image.png

But!But!But!But!But!But!But!But! 还有人说，我要从状态栏就开始渲染，也就是高逼格沉浸式设计，参考京东App
沉浸式设计：可以看到上边使用了SafeAreaView的屏幕很好的避开了刘海，但是如果设计稿的色彩和statubar的颜色出入很大，让用户很出戏，所以就出现了沉浸这个词，我不管你什么屏，我就从最上边开始渲染，开发者你帮我避开这些刘海和水滴。
来吧，安排一下！！！

对于ios系统，它是默认沉浸式。
iphoneX前导航栏的高度是64，其中statusBar的高度为20，而iPhoneX的statusBar高度变为了44，

// iPhoneX
const X_WIDTH = 375;
const X_HEIGHT = 812;
/**
 * 判断是否为iphoneX  大于iphonex尺寸的 iphone11也按X的尺寸处理
 * @returns {boolean}
 */
function isIphoneX() {
  return (
    Platform.OS === 'ios' &&
      ((screenH >= X_HEIGHT && screenW >= X_WIDTH) ||
          (screenH >= X_WIDTH && screenW >= X_HEIGHT))
  );
}

//在其他需要适配的界面进行判断赋值，我这里是tabnavigation
const statusHeight = isIphoneX ? sv(64) : sv(40);
tabBarOptions: {
    tabStyle: {
      minWidth: sh(115),
      height: statusHeight,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-end',
    },
    activeTintColor: '#323233',
    inactiveTintColor: '#999999',
    style: {
      borderWidth: 0,
      backgroundColor: '#FFCC66',
      height: statusHeight,
      shadowOpacity: 0,
      elevation: 0, // 去掉阴影
    },
  },

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

Lark20201019-172602.jpeg

对于android系统。
我们直接使用StatusBar，在android系统下使其透明即可，【backgroundColor、translucent】属性只在android上生效。

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

Feedback: {
    screen: Feedback,
    navigationOptions: ({ navigation }) => ({
      headerTitle: I18n.t('feedback'),
      tabBarVisible: false,
      headerStyle: {
        marginTop: statusBarHeight,  // 这里 statusBarHeight = StatusBar.currentHeight
        color: '#000',
      },
      headerTitleStyle: {
        color: '#121D27',
        fontSize: st(16),
      },
  }) },

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

Lark20201019-173611.jpeg

4.何时何地使用适配

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

Lark20201019-173948.jpeg

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

Lark20201019-173953.jpeg

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

Lark20201019-133109.png

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

ReactNative适配探讨

1.适配前置知识

2.适配问题

3.异形屏的适配

4.何时何地使用适配

你可能感兴趣的:(ReactNative适配探讨)