Michael_Jheng的部落格

使用flex組件之style,可根據可用空間大小動態調整,使用flex: 1設置組件填充所有空間,在此父類別下每個子類別組件之間將平均分配,空間分配採用比例分配,子類別比例越高空間越大,如果子類別為0(flex: 0),將不會分配

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

export default class AwesomeProject extends Component {
  render() {
    return (
      //父類別flex:1充滿整個空間    
      //子類別按照數字比例分配
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

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