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

小鱼儿 2022-10-09 02:42 161阅读 0赞

### 文章目录 ###

*   *  一、前言
     *  二、React Native 中的 FlexBox
     *  三、拓展阅读

--------------------

## 一、前言 ##

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

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

## 二、React Native 中的 FlexBox ##

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

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

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

**`React Native`中的`FlexBox` 和`Web CSS`上`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-flow，flex-grow，flex-shrink`。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]

以上是`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`以外的其它布局属性。

**视图边框**

**尺寸**

*  `width` number
 *  `height` number

**外边距**

*  `margin` number 外边距
 *  `marginBottom` number 下外边距
 *  `marginHorizontal` number 左右外边距
 *  `marginLeft` number 左外边距
 *  `marginRight` number 右外边距
 *  `marginTop` number 上外边距
 *  `marginVertical` number 上下外边距

**内边距**

*  `padding` number 内边距
 *  `paddingBottom` number 下内边距
 *  `paddingHorizontal` number 左右内边距
 *  `paddingLeft` number 做内边距
 *  `paddingRight` number 右内边距
 *  `paddingTop` number 上内边距
 *  `paddingVertical` number 上下内边距

**边缘**

*  `left` number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
 *  `right` number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
 *  `top` number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
 *  `bottom` number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。  
    定位(position)
 *  `position` enum(‘`absolute`’, ‘`relative`’)属性设置元素的定位方式，为将要定位的元素定义定位规则。

>  *  `absolute`：生成绝对定位的元素，元素位置通过 “`left`”, “`top`”, “`right`” 以及 “`bottom`” 属性进行规定。
>  *  `relative`：生成相对定位的元素，相对于其正常位置进行定位。因此，”`left:20`” 会向元素的 `LEFT` 位置添加 20 像素。

## 三、拓展阅读 ##

*  《[Web APP UI一致性设计][Web APP UI]》
 *  《[Vue进阶（幺柒幺）：前端用户体验提升（五）Flex实现弹性布局][Vue_Flex]》
 *  《[网站开发进阶（六十二）最强大的 CSS 布局——Grid 布局][CSS _Grid]》
 *  《[Vue进阶（幺柒零）：前端用户体验提升（四）应用rem/em实现字体自适应][Vue_rem_em]》
 *  《[Vue进阶（幺陆捌）：前端用户体验提升（三）应用vw/vh实现自定义布局][Vue_vw_vh]》
 *  《[Vue进阶（幺捌伍）：动态设置系统字体][Vue]》
 *  《[网站开发进阶（六十六）CSS3 - 新单位vmin/vmax与旧单位ex/ch使用详解][CSS3 - _vmin_vmax_ex_ch]》
 *  [阿里巴巴矢量图标库][Link 1]
 *  《[Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解][Vue_CSS-]》
 *  《[Vue进阶（幺肆叁）：如何用绝对定位(position:absolute)完美定位布局及其注意事项][Vue_position_absolute]》

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]: /images/20221005/64e6e131e838477f81649821191a0aff.png
[Web APP UI]: https://shq5785.blog.csdn.net/article/details/111572872
[Vue_Flex]: https://shq5785.blog.csdn.net/article/details/113975864
[CSS _Grid]: https://shq5785.blog.csdn.net/article/details/114500516
[Vue_rem_em]: https://shq5785.blog.csdn.net/article/details/113986978
[Vue_vw_vh]: https://shq5785.blog.csdn.net/article/details/113987631
[Vue]: https://shq5785.blog.csdn.net/article/details/114934434
[CSS3 - _vmin_vmax_ex_ch]: https://shq5785.blog.csdn.net/article/details/114965211
[Link 1]: https://www.iconfont.cn/
[Vue_CSS-]: https://shq5785.blog.csdn.net/article/details/108506762
[Vue_position_absolute]: https://shq5785.blog.csdn.net/article/details/108508095