07 ReactNaive Flex布局

位置 position

  testPosttion:{
    backgroundColor:'orange',
    top:300,
    left:50,
    right:20,
    bottom:20,
    height:60,
    width:60,
    position:'absolute'
  }

• absolute: 相对于父组件，上下左右的位置

1. 如果没有宽高，会按照上下左右值来渲染
2. 如果有宽高，则右、下值无效

• relative：书上写的是：只能用top和left，表示距离上一个同级组件的最上、最左有多少pt。

1. 需要注意的是假如AB位置都设置为相对，A本身有设置top或者left，B渲染时的位置是以A未计算top和left的原始位置计算的，而不是以A的实际位置计算

2. 默认是relative

3. 其他宽高key：maxHeight,maxWidth,minHeight,minWidth

4. flexbox布局中，允许存在宽高动态改变的组件，有些组件可以不指定宽高。在flexbox中，尽量不指定组件的宽高。

子组件的排列

• flexDirection:决定组件中的子组件们以何种方向排列。取值 row、row-reverse、column、column-reverse

1. 横向、反向横向、纵向、反向纵向
2. 默认是column纵向

• flexWrap :wrap 或者 nowrap

1. wrap 换行，nowrap 不换行
2. 默认是unwrap
3. alignItem的取值不能是stretch

• jusityContent 定义在一个方向上如何排列子组件。

1. flex-start、flex-end、center、space-between、space-around
2. 分别对应：起始对齐、尾部对齐、居中、两端对齐、分散对齐
3. 当子控件过多，使用space-around，可能会导致margin消失

• alignItems：定义子组件的对齐规则。
  flex-start、flex-end、center、stretch、baseline

1. 顶部对齐、底部对齐、居中对齐、拉伸对齐、baseline似乎和顶部没有区别？
2. 使用stretch时，不需要设置高度，否则无效

• alignSelf：比alignItems多一个auto，作用是，让子组件忽略其父组件中alignItems的取值，使用auto时表示和父组件相同。

决定显示规则的键

flex

1. 当父组件flex为非零值，子组件没有设置flex值，父组件设置space-around，可以实现子组件的均匀分布。

  container: {
    flex: 1,
    justifyContent: "space-around",
    backgroundColor: "white"
  },
  vs: {
    height: 50,
    backgroundColor: "gray"
  },

2. 此时，给某个子组件添加flex=1，该组件将会填充所有剩余空间，并导致其他子组件挤到一起。

vs1:{
    flex:1,
    height:50,
    backgroundColor:'green'
  }

3. 当子组件有多个含有flex键时，根据值来分配剩余空间。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    backgroundColor: "white"
  },
  vs: {
    height: 50,
    backgroundColor: "gray"
  },
  vs1:{
    flex:1,
    height:50,
    backgroundColor:'green'
  },
  vs2:{
    flex:2,
    height:50,
    backgroundColor:'green'
  }
});

此时设置为vs的控件，高度都为50，剩余空间分配给vs1和vs2，vs2的高度时vs1的两倍。

4. 当一个组件flex为-1时，如果它的父组件的剩余空间足够放下这个组件时，那么这个组件将会按照他它的宽高来显示，如果不足够，将会缩小至minHeight和minWidth来显示。
5. 可以通过设置或者不设置flex来调整子控件的布局效果。
6. zIndex:和CSS类似，用于表示z轴的层次

边框、空隙与填充

 border:{
    borderWidth:1,
    borderTopWidth:1,
    borderRightWidth:1,
    borderBottomWidth:1,
    borderLeftWidth:1
  },
  padding:{
    padding:2,
    paddingHorizontal:2,
    paddingVertical:2,
    paddingBottom:2,
    paddingLeft:2,
    paddingRight:2,
    paddingTop:2
  },
  margin:{
    margin:3,
    marginHorizontal:3,
    marginVertical:3,
    marginBottom:3,
    marginRight:3,
    marginLeft:3,
    marginTop:3
  }

参见
ReactNavive的布局，有详细图片示例。