ReactNative学习笔记1 Flexbox布局

一、比例属性flex和布局方向属性flexDirection

例如三个视图的flex属性值分别为2、4、8，则它们的高度比例为2：4：8。，宽度不指定，默认为全屏的宽度。

class ZLFReactNativeDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.style1}></View>
        <View style={styles.style2}></View>
        <View style={styles.style3}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
　　 flexDirection: column,
    backgroundColor: '#00FFFF',
  },
  style1: {
    flex: 2,
    backgroundColor: 'red',
  },
  style2: {
    flex: 4,
    backgroundColor: 'blue',
  },
  style3: {
    flex: 8,
    backgroundColor: 'green',
  },
});

  

如果要改为横向布局，则只需改父视图的属性flexDirection为row

二、对齐方式属性alignSelf

alignSelf主要有flex-start（对于纵向布局来说是居上，对于横向布局是居左）、 flex-end（对于纵向布局来说是居下，对于横向布局是居右）、 center（居中）、  auto（自由）、 stretch（铺满）几种对齐方式。

三、justifyContent

有如下值、用于约束子视图

 四、alignItems

有如下值、用于约束子视图