ReactNative學習筆記1 Flexbox佈局

1、比例屬性flex和佈局方向屬性flexDirection

例如三個視圖的flex屬性值分別爲二、四、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: ,
    backgroundColor: '#00FFFF',
  },
  style1: {
    flex: 2,
    backgroundColor: 'red',
  },
  style2: {
    flex: 4,
    backgroundColor: 'blue',
  },
  style3: {
    flex: 8,
    backgroundColor: 'green',
  },
});column

  

若是要改成橫向佈局，則只需改父視圖的屬性flexDirection爲row

2、對齊方式屬性alignSelf

alignSelf主要有flex-start（對於縱向佈局來講是居上，對於橫向佈局是居左）、 flex-end（對於縱向佈局來講是居下，對於橫向佈局是居右）、 center（居中）、  auto（自由）、 stretch（鋪滿）幾種對齊方式。
（對於縱向佈局來講是居下，對於橫向佈局是居右）

3、justifyContent

有以下值、用於約束子視圖

 4、alignItems

有以下值、用於約束子視圖