Michael_Jheng的部落格

flexbox可指定子類別的怖局,通常是使用flexDirection，alignItems以及justifyContent來實現正確佈局

flexDirection是決定佈局的方向,

可使用'row', 'row-reverse', 'column', 'column-reverse'

alignItems是決定佈局對齊方式,

可使用'flex-start', 'flex-end', 'center', 'stretch', 'baseline'

justifyContent是決定呈現內容的對齊方式,

可使用'flex-start', 'flex-end', 'center', 'space-between', 'space-around'

其餘的佈局方法可此連結的內容:Layout Props

接下來修改在[筆記]安裝React-Native與創造第一個專案,所創造的專案來演示佈局與flexbox

export default class AwesomeProject extends Component {
  render() {
    return (
      /*
      佈局設定為
        1. 方向為row
        2. 佈局對齊方式:中間
        3. 內容對齊方式:中間
      */        
      <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View style={{width: 100, height: 100, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

在Node.js command prompt執行"react-native run-android",即可安裝在模擬器或手機上演示,