React Native样式中组件之间的空间 [英] Space between components in React Native styling
本文介绍了React Native样式中组件之间的空间的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有6个View
组件(如图所示),我希望所有6个View
组件之间都有空间.
I have 6 View
components (shown in the picture) , I want to have space between all 6 View
components.
我的代码:
<View style={{flexDirection:'column',flex:6}}>
<View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}>
<View style={{backgroundColor:'red',flex:1}}>
</View>
<View style={{backgroundColor:'blue',flex:1}}>
</View>
</View>
<View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}>
<View style={{backgroundColor:'white',flex:1}}>
</View>
<View style={{backgroundColor:'black',flex:1}}>
</View>
</View>
<View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}>
<View style={{backgroundColor:'gray',flex:1}}>
</View>
<View style={{backgroundColor:'yellow',flex:1}}>
</View>
</View>
</View>
推荐答案
尝试向元素添加填充,然后在每行中添加另一个空白视图,填充为每个项目之间留出空间
Try to add padding to the element then and another blank view in each row, padding make space between each item
<View style={{
flexDirection:'column',
flex:1,
}}>
<View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'}}>
<View style={{backgroundColor:'red',flex:2,padding:'10'}}>
</View>
<View style={{flex:0.1}}/>
<View style={{backgroundColor:'blue',flex:2,padding:'10'}}>
</View>
</View>
<View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'}}>
<View style={{backgroundColor:'white',flex:2,padding:'10'}}>
</View>
<View style={{flex:0.1}}/>
<View style={{backgroundColor:'black',flex:2,padding:'10'}}>
</View>
</View>
<View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'}}>
<View style={{backgroundColor:'gray',flex:1,padding:'10'}}>
</View>
<View style={{flex:0.1}}/>
<View style={{backgroundColor:'yellow',flex:1,padding:'10'}}>
</View>
</View>
这篇关于React Native样式中组件之间的空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文