1私痹,豎向按比例布局
代碼:
<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瘪撇,橫向按比例布局
代碼:
<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>