React-Native flex-box перекрытие минимальная высота требуется?

Question

Итак, у меня есть достаточно хорошее понимание flexbox, но эта проблема, кажется, постоянно всплывает для меня, поэтому я решил опубликовать ее, чтобы положить ее в покое ...

Во flexbox я пытаюсь складывать элементы в ScrollView следующим образом:

1

2

3

но мои результаты выглядят примерно так:

1

2 3

где 2 и 3 перекрывают друг друга. Я не понимаю, почему это происходит, но я могу это исправить, если я определю высоту. Моя проблема с определением высоты заключается в том, что она фиксированная и не изменяется в зависимости от размеров экрана, поэтому как мне обойти жесткое кодирование высоты. Смотрите примеры кода / скриншоты ниже.

<ScrollView style={{flex: 0.8, flexDirection: 'column',}}>     
   <View style={{ flex: 0.2, height: 250 }}>
            <Swiper
              cards={['DO', 'MORE', 'OF', 'WHAT', 'MAKES', 'YOU', 'HAPPY']}
              renderCard={card => (
                <View style={styles.card}>
                  <Text style={styles.text}>{card}</Text>
                </View>
              )}
              onSwiped={(cardIndex) => { console.log(cardIndex); }}
              onSwipedAll={() => { console.log('onSwipedAll'); }}
              cardIndex={0}
              stackSize={3}
              backgroundColor="#fff"

            />
          </View>

          <View style={{ flex: 0.5 }}>
            <Text
              h3
              style={{
                color: '#161616', fontWeight: 'bold', textAlign: 'center', paddingTop: scale(15),
              }}
            >
              Case Information
            </Text>
    </View>
 </ScrollView>

Как вы видите в коде выше, у меня высота определена как 250. С определенной высотой я получаю вывод, подобный этому (что я хочу):

Без высоты: 250 Я получаю вывод, подобный этому:

Опять же, я не хочу, чтобы высота 250 была там, потому что она может варьироваться в зависимости от размера экрана. Есть ли хороший способ решить эту проблему? Также обратите внимание, что я использую response-native-deck-swiper для компонента swiper.

Answer 1

Вам не нужно жестко задавать высоту.Вы можете получить доступ к экрану, на котором запущено ваше приложение, с помощью приведенного ниже кода.

import {Dimensions} from 'react-native';
const {height, width} = Dimensions.get('window');

Затем вы можете указать высоту, например:

<View style={{ flex: 0.2, height: height*0.5 }}>

InВ случае выше, высота будет 50% от высоты экрана вашего мобильного телефона.Надеюсь, поможет.