close
使用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",即可安裝在模擬器或手機上演示,
文章標籤
全站熱搜
留言列表