react-native 常用flex布局

2017-05-16  本文已影响41人  MrAlexLee

1,竖向按比例布局

409B15FC-9B22-4966-9F6E-8A4B1AA44949.png
代码:
<code>
<View style={{flex:1,alignItems:'center'}}>
<View style={{flex:1,backgroundColor:'#000',width:width5/6}}></View>
<View style={{flex:2,backgroundColor:'#ff4a2e',width:width
5/6}}></View>
<View style={{flex:3,backgroundColor:'#6bff4f',width:width5/6}}></View>
<View style={{flex:4,backgroundColor:'#3a48ff',width:width
5/6}}></View>
</View>
</code>
2,横向按比例布局 48460300-6628-4A5A-9C15-FF2CF88AC9B5.png
代码:
<code>
<View style={{flex:1,flexDirection:'row'}}>
<View style={{flex:1,backgroundColor:'#000',height:height5/6}}></View>
<View style={{flex:2,backgroundColor:'#ff4a2e',height:height
5/6}}></View>
<View style={{flex:3,backgroundColor:'#6bff4f',height:height5/6}}></View>
<View style={{flex:4,backgroundColor:'#3a48ff',height:height
5/6}}></View>
</View>
</code>
上一篇 下一篇

猜你喜欢

热点阅读