ReactNative进阶（四十四）：Mobile App适配性优化

Posted 2021-06-30 No Silver Bullet

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ReactNative进阶（四十四）：Mobile App适配性优化相关的知识，希望对你有一定的参考价值。

文章目录

前言

移动端应用开发过程中，内容自适应是避不开的一个注意点。相较于PC Web端开发应用设备的数量种类，Mobile APP 面临着设备应用多样性问题，各厂商生产设备多样，同一厂商不同型号的电子设备分辨率、屏幕尺寸相异性是不得不考虑的一个问题，尤其是将手持设备，例如iPad等考虑在内，更加剧了设备适配性的思考。

在RN实现移动应用开发过程中，通过链接跳转方式跳转至其他技术栈（例如Vue、React、Angular、H5、JSP）实现的应用情形中，适配性问题同样值得深思。

React Native 中的FlexBox

像素无关
在React Native中尺寸是没有单位的，它代表了设备独立像素。

<View style={ {width:100,height:100,margin:40,backgroundColor:'gray'}}>
   <Text style={ {fontSize:16,margin:20}}>尺寸</Text>
</View>

上述代码，运行在android上时，View的长和宽被解释成：100dp 100dp单位是dp，字体被解释成16sp 单位是sp，运行在ios上时尺寸单位被解释称了pt，这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变；

值得一提的是，React Native中的FlexBox 和Web CSS上FlexBox工作方式是一样的。但有些地方还是有些出入的。

React Native中的FlexBox 和Web CSSS上FlexBox的不同之处

flexDirection: React Native中默认为flexDirection:'column'，在Web CSS中默认为flex-direction:'row'；
alignItems: React Native中默认为alignItems:'stretch'，在Web CSS中默认align-items:'flex-start'；
flex: 相比Web CSS的flex接受多参数，如:flex: 2 2 10%;，在 React Native中flex只接受一个参数。

不支持属性：align-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-shrink。

在这里插入图片描述

以上是React Native中的FlexBox 和Web CSSS上FlexBox的不同之处，记住这几点，你可以像在Web CSS上使用FlexBox一样，在React Native中使用FlexBox。

Flex in React Native
React Native所支持的Flex属性如下：

父视图属性(容器属性)：

flexDirection：‘row’, ‘column’,’row-reverse’,’column-reverse’；
flexWrap：‘wrap’, ‘nowrap’；
justifyContent ：‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’；
alignItems：‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’；

其他布局 in React Native

以下属性是React Native所支持的除Flex以外的其它布局属性。

视图边框

borderBottomWidth number 底部边框宽度
borderLeftWidth number 左边框宽度
borderRightWidth number 右边框宽度
borderTopWidth number 顶部边框宽度
borderWidth number 边框宽度
| border<Bottom | Left | Right | Top>Color 个方向边框的颜色 |
borderColor 边框颜色