Flexbox устанавливает высоту до 0 - PullRequest
Новая
       17

Flexbox устанавливает высоту до 0

0 голосов
/ 11 января 2019

В настоящее время я работаю над собственным приложением реагирования, и у меня возникла проблема с flex.
Каждый раз я добавляю flex: 1 в стиле элемента View или Text, его высота равна 0, что приводит к исчезновению элемента.

Вот что я пытаюсь создать: design

(конечно, цвета здесь только для того, чтобы помочь пониманию)

Мой код: 

return (
    <View style={{paddingVertical: 7, display: 'flex', flexDirection: 'row', alignItems: "center", justifyContent: 'center', height: 50, borderWidth: 1}}>
        <View style={{flex: 1}}>
            <View style={{display: 'flex', flexDirection: 'column'}}>
                <View style={{flex: 1}}>
                     <View style={{display: 'flex', flexDirection: 'row'}}>                     <View style={{flex: 1, backgroundColor: '#0f0'}}>
                         <Text>
                             First name Last name
                         </Text>
                     </View>
                     <View style={{flex: 1}}>
                         <Text style={{textAlign: 'center'}}>
                             27 km
                         </Text>
                     </View>
                 </View>
             </View>
             <View style={{flex: 1}}>
                 <Text style={{textAlign: 'center'}}>Booked ride</Text>
             </View>
         </View>
     </View>
     <View style={{flex: 0}}>
         <TouchableOpacity onPress={this.onTake}>
             <Text style={styles.btnBox}>
                 Take
             </Text>
         </TouchableOpacity>
     </View>
 </View>
)

Это то, что у меня есть (с повторением двух элементов): current

1 Ответ

0 голосов
/ 11 января 2019

Первый вложенный <View> бесполезен, удалите его и настройте следующий как: 

return (
  <View
    style={{
      paddingVertical: 7,
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      height: 50,
      borderWidth: 1,
    }}>
    <View style={{ flex: 1, flexDirection: 'column' }}>
      <View style={{ flex: 1 }}>
        <View style={{ display: 'flex', flexDirection: 'row' }}>
          <View style={{ flex: 1, backgroundColor: '#0f0' }}>
            <Text>First name Last name</Text>
          </View>
          <View style={{ flex: 1 }}>
            <Text style={{ textAlign: 'center' }}>27 km</Text>
          </View>
        </View>
      </View>
      <View style={{ flex: 1 }}>
        <Text style={{ textAlign: 'center' }}>Booked ride</Text>
      </View>
    </View>
    <View style={{ flex: 0 }}>
      <TouchableOpacity onPress={this.onTake}>
        <Text>Take</Text>
      </TouchableOpacity>
    </View>
  </View>

Я также создал закуски на случай, если вы захотите взглянуть: пример . Теперь вы можете выровнять тексты так, как вы предпочитаете:)

...