React Native Flexbox 布局

作者: mtry | 来源:发表于2020-08-17 19:52 被阅读0次

React Native 之 flexbox布局
react-native 布局篇
react native学习笔记4——FlexBox布局
React Native开发之FlexBox代码＋图解
React Native - Flexbox布局
React-Native之 Flexbox布局
React Native Flexbox布局
基础篇_使用Flexbox布局
003@React Native的FlexBox布局
React Native学习(五)：使用Flexbox布局

写在前面

iOS 开发中经常使用绝对布局，描述试图自身相对父试图的位置关系，比如

view.frame = CGRectMake(10,20,30,40);

表示：view 在父试图的位置，横坐标和纵坐标分别为10和20，宽和高分别为30和40。

Flexbox 布局：描述子视图之间的关系。

Flexbox 主要属性对比

flexDirection
flexWrap
justifyContent
alignContent
alignItems
alignSelf

flexDirection

flexDirection:row|column|row-reverse|column-reverse

设置子视图布局主轴方向，默认为 column

比如：flexDirection 为 row，表示子视图布局的主轴为水平方向，副轴为竖直方向。

<View style={tmp_styles.containerStyle}>
  <View style={tmp_styles.itemViewStyle}>
    <Text>item1</Text>
  </View>
  <View style={tmp_styles.itemViewStyle}>
    <Text>item2</Text>
  </View>
  <View style={tmp_styles.itemViewStyle}>
    <Text>item3</Text>
  </View>
  <View style={tmp_styles.itemViewStyle}>
    <Text>item4</Text>
  </View>
</View>

const tmp_styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    flexDirection: 'row',
    margin: 5,
  },
  itemViewStyle: {
    backgroundColor: 'darkcyan',
    width: 60,
    height: 35,
    margin: 5
  }
})

image1.png

flexDirection 改为 column

image2.png

flexWrap

子视图在主轴方向布局排列是否需要换行，默认 nowrap

flexWrap:wrap|nowrap|wrap-reverse

nowrap：沿着主轴方向不换行显示
wrap：沿着主轴换行显示

const tmp_styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    margin: 5
  },
  itemViewStyle: {
    backgroundColor: 'darkcyan',
    justifyContent: 'center',
    alignItems: 'center',
    width: 100,
    height: 30,
    margin: 5
  }
})

image3.png

flexWrap 改为 nowrap

image4.png

flexWrap 改为 wrap-reverse

image5.png

justifyContent

justifyContent：子视图在主轴上的排列方式

justifyContent:flex-start|flex-end|center|space-between|space-around|space-evenly

使用 justifyContent 改为 center

const tmp_styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 5
  },
  itemViewStyle: {
    backgroundColor: 'darkcyan',
    justifyContent: 'center',
    alignItems: 'center',
    width: 60,
    height: 35,
    margin: 5
  }
})

image6.png

alignContent

alignContent：子视图在副轴上的排列方式，flexWrap 为 wrap|wrap-reverse 才有效

alignContent:flex-start|flex-end|center|stretch|space-between|space-around

比如：

const tmp_styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignContent: 'center',
    margin: 5
  },
  itemViewStyle: {
    backgroundColor: 'darkcyan',
    justifyContent: 'center',
    alignItems: 'center',
    width: 100,
    height: 30,
    margin: 5
  }
})

image7.png

flexDirection 改为 column

image8.png

alignItems

alignItems：子视图在副轴上的排列方式，flexWrap 为 nowrap 才生效

alignItems:flex-start|flex-end|center|stretch|baseline

const tmp_styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'nowrap',
    alignItems: 'center',
    marginTop: 5
  },
  itemViewStyle: {
    backgroundColor: 'darkcyan',
    justifyContent: 'center',
    alignItems: 'center',
    width: 60,
    height: 35,
    margin: 5
  }
})

image9.png

flexDirection 改完 column

image10.png

alignSelf

alignSelf：align-items 在伸缩容器上使用它，伸缩容器内部所有的元素都一致地受制于 align-items 的值。但是有些时候，我们希望伸缩容器内部某个元素在侧轴上的排列方式有所差异。此时就不能使用 align-items，因为 align-items 作用于整体。我们希望作用于部分。这就是 align-self 的发挥场地。

alignSelf：默认 auto，继承父容器的值

alignSelf:auto|flex-start|flex-end|center|stretch|baseline

<View style={alignSelf_styles.containerStyle}>
  <View style={alignSelf_styles.itemViewStyle}>
    <Text>item1</Text>
  </View>
  <View style={alignSelf_styles.itemViewSpecialStyle}>
    <Text>item2</Text>
  </View>
  <View style={alignSelf_styles.itemViewStyle}>
    <Text>item3</Text>
  </View>
  <View style={alignSelf_styles.itemViewStyle}>
    <Text>item4</Text>
  </View>
</View>

const alignSelf_styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    flexDirection: 'column',
    flexWrap: 'nowrap',
    alignItems: 'center',
    margin: 5
  },
  itemViewStyle: {
    backgroundColor: 'darkcyan',
    width: 60,
    height: 30,
    margin: 5
  },
  itemViewSpecialStyle: {
    backgroundColor: 'darkcyan',
    flexWrap: 'nowrap',
    alignSelf: 'flex-start',
    width: 60,
    height: 30,
    margin: 5
  }
})

image11.png

总结

标题	描述	枚举值	条件
flexDirection	设置主轴方向(水平or竖直)	row, column, row-reverse, column-reverse	无
flexWrap	子视图在主轴方向布局排列是否需要换行	wrap, nowrap, wrap-reverse	无
justifyContent	子视图在主轴上的排列方式	flex-start, flex-end, center, space-between, space-around, space-evenly	无
alignContent	子视图在副轴上的排列方式	flex-start, flex-end, center, stretch, space-between, space-around	flexWrap 为 wrap, wrap-reverse 才有效
alignItems	子视图在副轴上的排列方式	flex-start, flex-end, center, stretch, baseline	flexWrap 为 nowrap 才生效
alignSelf	在子视图中个性化父试图的 alignItems 定义	auto, flex-start, flex-end, center, stretch, baseline	无