React Native 布局相关 - RN

涉及到页面 UI 方面则布局是必不可少的一项设置，其关乎到各个元素之间的排列方式与排列顺序等直观样式效果，如下对此简要的进行学习归纳，也为了日后开发更加便捷的进行快速查阅。

<View style={{
    flex:1,
    flexDirection: ‘’, // row、column
    justifyContent: ‘’, // flex-start、center、flex-end、space-between、space-around、space-evenly
    alignItems: ‘’, // flex-start、center、flex-end、stretch
    alignContent: ‘’, // flex-start、center、stretch 、flex-end、space-between、space-around、space-evenly
    flexWrap: ‘’, //
}}>

Flex

该属性负责决定元素在主轴上填充渲染的方式，根据当前页面中每个子元素所设置的 flex 属性值依次按比分配划分当前整个视图的区域；
例如：设置最外层视图 View 的 flex 为 1，其余子视图的 flex 属性依次为 1、2、3，则当前视图被平均等分为六份，子子视图依据不同 flex 的值依次配比划分当前视图区域

Flex Direction

该属性负责控制当前控件布局主轴的排列方式，子元素依据其属性进行排列；
水平横向 x 轴：row
纵向竖直 y 轴：column

flexDirection.jpg

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      <View style={{flex: 1, flexDirection: 'column'}}> // 纵向竖直排列 & 按比例六等分按比分配
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

Justify Content:

该属性负责决定其子元素沿着主轴的排列方式，子元素按此方式依次排列，具体排列效果如下所示：
flex-start、center、flex-end、space-between、space-around、space-evenly

justityContent.jpg

import React, { Component } from 'react';
import { View } from 'react-native';

export default class JustifyContentBasics extends Component {
  render() {
    return (
      // 尝试把`justifyContent`改为`center`看看
      // 尝试把`flexDirection`改为`row`看看
      <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
      }}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 1, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

Align Items

该属性负责控制与主轴对应的次轴的排列方式，即主轴若为 x 横轴，则次轴即为 y 竖轴。
flex-start、center、flex-end、stretch
注：此处若需要使用 stretch 属性则子元素在次轴方向的尺寸不能设置为固定值，否则无法生效

alignItems.jpg

import React, { Component } from 'react';
import { View } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'stretch',
      }}>
        <View style={{width: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, backgroundColor: 'steelblue'}} />
        <View style={{width: 50, backgroundColor: 'blue'}} />
      </View>
    );
  }
};

Align Content

该属性负责控制沿横轴排列的方式，类似于瀑布流的样式
stretch：换行以匹配容器横轴的高度
flex-start：将换行对齐到容器横轴的起点
center：将包装线对齐到容器横轴的中心
flex-end：将包裹的线对齐到容器横轴的末端
space-between：沿容器的主轴线均匀地缠绕线，在线之间分配剩余空间
space-around：沿容器的主轴线均匀地包裹线，在线周围分配剩余空间。与使用空格之间的空间相比，周围的空间将导致空间分配到第一行的开头和最后一行的末尾
space-evenly：沿主轴均匀地分布在对齐容器内。每对相邻项之间的间距，主开始边缘和第一个项目以及主结束边缘和最后一个项目都完全相同

alignContent.jpg

Flex Wrap

该属性负责控制布局排列的方向顺序，即单行缩进、正序换行或逆序换行

flexWrap.jpg

---

以上便是此次分享的全部内容，希望能对大家有所帮助！