React-Native flex-box重叠所需的最小高度？

Question

So I have a pretty good understanding of flexbox but this same issue always seems to keep popping up for me so I figured I'd post it in order to put it to rest once and for all...

In flexbox I try to stack items in a ScrollView like so:

1

2

3

but my results turn out a bit like this:

1

2 3

where 2 and 3 sort of overlap. I don't understand why this occurs but I can fix it if I define a height. My issue with defining a height is that it is fixed and not variable across screen sizes so how can I get around hard coding a height. See code examples / screenshots below.

<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>

As you see in the code above I have height defined as 250. With the height defined I get an output like this (what I want):

Without the height: 250 I get an output like this:

Again I don't want the height 250 in there because it could vary per screen size is there a good way to fix this issue? Also note I am using react-native-deck-swiper for the swiper component.

Answer 1

You don't need to hard code the height. You can get of the screen on which you app is running by using the code below.

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

Then you can provide height like:

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

In the case above, the height will be 50% of the height of your mobile's screen. Hope it helps.