React Native - два элемента: один слева, один в центре

Я изо всех сил пытался выровнять два элемента в следующих положениях: первый должен быть в левой части строки, а второй элемент должен быть в центре строки.

Следующий код ниже не полностью центрирует мой второй элемент:

<View style = {{flexDirection: 'row', justifyContent: 'space-between'}}>

            <View style = {{ paddingLeft: 10 }}>
                <Text style = {{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
            </View>
            <View style = {{paddingRight: 10 }}>
            <Text>
                CENTER
            </Text>
            </View>
            {/* Empty view so that space-between works? */}
            <View
                style = {{paddingRight: 10 }}>
            </View>
 </View>

Это был самый близкий мне результат к желаемому результату. Однако это не помогает. Может ли кто-нибудь знать лучший способ успешно реализовать это?

react-native flexbox alignment center

23.03.2018 05:38

Умерло ли Create-React-App?

В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.

Освоение React Native: Пошаговое руководство для начинающих

React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...

Ускоренная стилизация компонентов React Native с помощью NativeWind

В чем разница между react native и react ?

React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

Хуки React: что это такое и как их использовать

Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...

14 612

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вам необходимо добавить flex: 1 в родительский вид и дочерние представления (все дочерние элементы будут иметь flex: 1, если вы хотите, чтобы все они были одинакового размера, в противном случае определяйте ширину / гибкость для каждого дочернего представления отдельно).

Попробуй это:

      <View style = {{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
        <View style = {{ flex: 1, paddingLeft: 10 }}>
          <Text style = {{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
        </View>
        <View style = {{ flex: 1, paddingRight: 10 }}>
          <Text style = {{ textAlign:'center' }}>CENTER</Text>
        </View>
        <View
          style = {{ flex: 1, paddingRight: 10 }}>
        </View>
      </View>

Добавлен style = {{ textAlign:'center' }} в текст в центре View child, чтобы дать вам представление о его центральном положении. Вы можете изменить / удалить его.

23.03.2018 06:12

  <View style = {{flex:1, flexDirection: 'row', justifyContent: 'space-around'}}>
        <View style = {{width: 50, height: 50}}>
            <Text style = {{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
        </View>
        <View style = {{ width: 50, height: 50}}>
            <Text>CENTER</Text>
        </View>
        <View style = {{ width: 50, height: 50}}/>
 </View>

23.03.2018 06:19

Когда я изучал Android, мне посоветовали не использовать слишком много «слоев» компонентов. Следуя этой философии, я решил использовать свойство 'absolute' для левого элемента, чтобы добиться более простого результата. В этой схеме «левый» предмет почти прилипает к левой стене.

<View
    style = {{
        height: 50,
        flexDirection: 'row', // a must
        alignItems: 'center', // to make items center vertically.
        justifyContent: 'center' // to make the second item center horizontally.
    }}
>
    <MaterialIcons
        style = {[styles.titleIcon, { position: 'absolute', left: 0 }]} // on left, still center vertically.
        name='arrow-back'
        onPress = {() => {
            navigation.goBack();
        }}
    />
    <Text style = {styles.titleText}>{result.name}</Text> // on center automatically
</View>

Проблема в том, что если текст длинный, он может перекрывать элемент абсолютной позиции.

— 14.12.2020 05:58

@JeffPadgett Хорошо, я согласен ... Если это произойдет, возможно, потребуется дополнительный код.

— 16.12.2020 16:49

11.10.2019 00:17