Как оправдать (слева, справа, в центре) каждого ребенка самостоятельно?

В реакции родных у меня есть:

<View style={styles.navBar}>
  <Text>{'<'}</Text>
    <Text style={styles.navBarTitle}>
      Fitness & Nutrition Tracking
    </Text>
  <Image source={icon} style={styles.icon}/>
</View>

с этими стилями:

{
    navBar: {
        height: 60,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    navBarTitle: {
        textAlign: 'center',
    },
    icon: {
        height: 60,
        resizeMode: 'contain',
    },
}

Это эффект, который я получаю:

Это эффект, который я хочу:

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

Во втором примере каждый пункт обоснован по-разному. Первый пункт выровнен по левому краю. Второй пункт выровнен по центру. Третий, правосторонний.

Этот вопрос аналогичен, но, похоже, реагирует на нативность не поддерживает margin: 'auto'. Кроме того, другие ответы работают только в том случае, если вам небезразлично выравнивание по левому и правому краям, но никто не обращается к выравниванию по центру без автоматической маржи.

Я пытаюсь сделать навигационную панель в реагировать на родной. Версия Vanilla IOS выглядит следующим образом:

_{(источник: apple.com)}

Как мне сделать что-то подобное? В основном я занимаюсь центрированием.

Ответ 1

Одним из способов является использование вложенных представлений (гибких контейнеров) для трех разных областей и установка гибкости: 1 в левую и правую области

<View style={styles.navBar}>
  <View style={styles.leftContainer}>
    <Text style={[styles.text, {textAlign: 'left'}]}>
      {'<'}
    </Text>
  </View>
  <Text style={styles.text}>
    Fitness & Nutrition Tracking
  </Text>
  <View style={styles.rightContainer}>
    <View style={styles.rightIcon}/>
  </View>
</View>

const styles = StyleSheet.create({
  navBar: {
    height: 60,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'blue',
  },
  leftContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    backgroundColor: 'green'
  },
  rightContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  rightIcon: {
    height: 10,
    width: 10,
    resizeMode: 'contain',
    backgroundColor: 'white',
  }
});

Ответ 2

Вы также можете установить marginLeft: 'auto' на средний компонент. Это должно подтолкнуть его вправо. Также работает для React Native

Источник: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

Ответ 3

Если вы используете навигационную панель модуля Navigator, см. мой вопрос: Изменение стиля по умолчанию для Navigator.NavigationBar(название)