RN学习之Flexbox

我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

一般来说，使用flexDirection、alignItems、 justifyContent和flexwrap四个样式属性就已经能满足大多数布局需求。

Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

row：主轴为水平方向，起点在左端。

row-reverse：主轴方向，起点在右端。

column（默认值）：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

Justify Content

在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。

flex-start代码运用：

    innerViewStyled1: {
        backgroundColor: 'orange',
        height: 100,
        width: 414,
        justifyContent: 'flex-start',
        flexDirection:'row',
    },
    marginView1:{
        backgroundColor:'gray',
        height: 100,
        marginLeft:10,
        width: 50
    },

效果展示：

center效果展示：

flex-end效果展示：

space-around效果展示：

space-between效果展示：

space-evenly效果展示：

Align Items

在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。

flexwrap

flexwrap有三个样式，默认为nowrap，不进行换行；wrap进行换行，第一行在上面；wrap-reverse与wrap相反，第一行在下方。

flex

自动计算子视图的宽度，如：<View flex: 1></View>,<View flex: 2></View> 第一个视图的宽度就为父视图的三分之一，第二个为三分之二。

alignSelf

给次轴单独设置元素的对齐方式：

flex-end底部对齐

center居中对齐

flex-start顶部对齐，

baseline元素位于容器的基线上，如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

auto默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"

streth元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

 

推荐两篇很总结的很到位的博客：https://weibo.com/1712131295/CoRnElNkZ?ref=collection&type=comment#_rnd1554204708680

http://www.devio.org/2016/08/01/Reac-Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/