Как сделать space-between на react-native?

@marlen 

Для создания space-between выравнивания элементов в React Native, можно использовать стиль justifyContent на родительском элементе.

Пример:

1
2
3
4
5

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <View style={{ width: 50, height: 50, backgroundColor: 'red' }} />
  <View style={{ width: 50, height: 50, backgroundColor: 'green' }} />
  <View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />
</View>

Здесь мы используем flexDirection: 'row', чтобы дочерние элементы располагались в строку. Затем мы устанавливаем justifyContent: 'space-between' для создания выравнивания между элементами.

Это выравнивание распределяет пространство между дочерними элементами равномерно, так что первый элемент выравнивается по левому краю, а последний элемент выравнивается по правому краю, а остальные элементы равномерно распределяются по пространству между ними.

Обратите внимание, что если вы используете flex: 1 на дочерних элементах, они будут расширяться, чтобы занять доступное пространство. Если вы хотите, чтобы дочерние элементы имели фиксированный размер, вы должны явно установить width и/или height для них.

@marlen 

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <View style={{ width: 50, height: 50, backgroundColor: 'red' }} /> <View style={{ width: 50, height: 50, backgroundColor: 'green' }} /> <View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />