android - React-Native 弹性盒重叠所需的最小高度？

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，因为它可能会因屏幕尺寸而异，有没有好的方法可以解决此问题？另请注意，我使用react-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 }}>

在上述情况下，高度将为 50%手机屏幕的高度。希望能帮助到你。