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，因为它可能因屏幕大小而异，是否有解决此问题的好方法？另请注意，我正在使用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%。希望能帮助到你。

React-Native柔盒重叠最小高度是否需要？

1 个答案: