Пространство между компонентами в реактиве

Ответ 1

Попытайтесь добавить дополнение к элементу, а затем и другое пустое представление в каждой строке, прокладка делает пространство между каждым элементом

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

Ответ 2

Вы можете просто добавлять поля к элементам, и он будет работать нормально.

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

Ответ 3

у вас есть 2 решения в этом случае

во-первых, используйте поля/отступы, чтобы сделать воздух между гибким элементом

а другой способ устанавливается justifyContent для "space -ween" || "Пространство вокруг"

но вы должны знать о некоторой информации, чтобы использовать лучшее решение в другом случае

1- (заполнение полей)

в некоторых случаях (больше), отступ лучше

как вы знаете, если у нас есть поле (означает элемент), у вас есть два пробела,

сначала между контентом и границей [Внутреннее пространство]

во-вторых, пробел между границей и другим элементом внешнего ящика [космическое пространство]

если у вас есть элемент, и вы хотите переместить элемент в своем стиле, вы должны использовать margin, потому что, если вы используете отступ для своего элемента, внутреннее пространство изменилось, и во многих случаях этот подход создает некоторый сбой в вашем элементе, {{если вы хотите используя padding, вы должны создать один View и обернуть все ваши элементы и установить для вас отступ для}}}

и если вы хотите использовать пробел между || пространство-вокруг, вы должны знать это, пространство-между и пространство-вокруг имеют одну разницу

в промежутке между ними, пространство создается между элементами, а не создает пространство между вашим элементом с боков

и пространство вокруг заданного пространства с элементами и с боков

Ответ 4

Вы можете добавить следующее в своем стиле:

attachcontainer{
   flexDirection:  'row',
   justifyContent: 'space-between'
}