本地作出反应造型

我有6个View部件（图中示出），我想所有6个View组件之间具有空间。

我的代码：

<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>

来源

2017-08-04 Behdad Ahmadi

你试图只是一个'保证金补充：10'你内心的视图元素？ –

尝试添加填充到元素，然后每行中的另一个空白视图，每个项目

<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>

之间填充腾出空间

来源

2017-08-04 09:58:31

您可以简单地添加边距到元素，它将工作fi东北。

<View style={{flexDirection:'column',flex:6}}> 
 
    <View style={{flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10}}> 
 
    <View style={{backgroundColor:'red',flex:1, marginRight: 5}}> 
 
    </View> 
 
    <View style={{backgroundColor:'blue',flex:1, marginLeft: 5}}> 
 
    </View> 
 
    </View> 
 

 

 
    <View style={{flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10}}> 
 
    <View style={{backgroundColor:'white',flex:1, marginRight: 5}}> 
 
    </View> 
 
    <View style={{backgroundColor:'black',flex:1, marginLeft: 5}}> 
 
    </View> 
 
    </View> 
 

 
    <View style={{flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10}}> 
 
    <View style={{backgroundColor:'gray',flex:1, marginRight: 5}}> 
 
    </View> 
 
    <View style={{backgroundColor:'yellow',flex:1, marginLeft: 5}}> 
 
    </View> 
 
    </View> 
 
</View>

来源

2017-08-04 10:02:43

本地作出反应造型

回答

相关问题