react-native 常用flex布局

1，豎向按比例布局

409B15FC-9B22-4966-9F6E-8A4B1AA44949.png

代碼：

<View style={{flex:1,alignItems:'center'}}>
        <View style={{flex:1,backgroundColor:'#000',width:width*5/6}}></View>
        <View style={{flex:2,backgroundColor:'#ff4a2e',width:width*5/6}}></View>
        <View style={{flex:3,backgroundColor:'#6bff4f',width:width*5/6}}></View>
        <View style={{flex:4,backgroundColor:'#3a48ff',width:width*5/6}}></View>
</View>

2，橫向按比例布局

48460300-6628-4A5A-9C15-FF2CF88AC9B5.png

代碼：

<View style={{flex:1,flexDirection:'row'}}>
        <View style={{flex:1,backgroundColor:'#000',height:height*5/6}}></View>
        <View style={{flex:2,backgroundColor:'#ff4a2e',height:height*5/6}}></View>
        <View style={{flex:3,backgroundColor:'#6bff4f',height:height*5/6}}></View>
        <View style={{flex:4,backgroundColor:'#3a48ff',height:height*5/6}}></View>
      </View>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容