本地作出反應造型

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

本地作出反應造型

回答

相關問題