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

Question

Есть ли способ стилизовать элементы (из вида ratings) таким образом, чтобы между ними автоматически оставалось некоторое пространство? Я думал о печати текста (пробелов), но это не похоже на идеальное решение. Что еще я могу сделать?

 <View style={styles.introContainer}>
          <Text style={styles.name}>{firstName}</Text>
          <View style={styles.ratings}>
            <Icon name="user" size={moderateScale(20)} />
            <Icon name="star" size={moderateScale(13)} />
            <Text style={styles.rating}> {rating}</Text>
          </View>
        </View>

  ratings: {
    flexDirection: 'row',
    //alignContent: 'center',
    alignItems: 'baseline',
  },
  introContainer: {
    alignItems: 'center',
    paddingTop: 50,
    width: '100%',
  },

Answer 1

ОБНОВЛЕНИЕ

Извините, в React Native нет поддержки grid по умолчанию, поэтому вариант 3 отклоняется, если вы не хотите использовать стороннюю библиотеку, например https://www.npmjs.com/package/react-native-responsive-grid

Вариант 1:

Установите для значка звездочки правое и левое поле

Вариант 2:

Добавьте width и display: flex к стилю ratings и установите justifyContent на space-between или space-around

Вариант 3:

Используйте сетку вместо гибкости и установите grid-gap

Answer 2

Если вы имеете в виду дочерние элементы компонента View, вы можете попробовать использовать:

.ratings > * {
 // your css here
}

Используя >, вы нацеливаетесь на прямых дочерних элементов селектора parent (в данном случае селектор класса .ratings.

* означает любой дочерний элемент, хотя вы должны быть более конкретными c, если можете (все дочерние элементы должны быть нацелены на один и тот же класс или быть одинаковыми html элемент) css дочерний комбинатор

Answer 3

добавьте margin или padding к любому элементу, который вы хотите дать ему больше места

, или вы можете применить width к нескольким элементам и использовать

display: flex;
justify-content: space-between;

поэтому они расположены на одинаковом расстоянии