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>

正如您在上面的代码中看到的，我将height定义为250。定义了高度后，我会得到如下输出(我想要的)：

​

​

如果不使用height: 250，我会得到如下输出：

​

​

再说一次，我不想要250的高度，因为它可能会随着屏幕尺寸的不同而不同，有没有解决这个问题的好方法？还要注意的是，我对swiper组件使用了react-native-deck-swiper。

Answer 1

你不需要硬编码高度。你可以通过使用下面的代码来获得你的应用程序正在运行的屏幕。

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

然后，您可以提供高度，如：

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

在上面的例子中，高度将是你手机屏幕高度的50%。希望能有所帮助。