我有一个具有以下结构的组件:
我有一个具有以下结构的组件:
<View style={styles.container}>
<LoyaltyCard {...cardData} onPress={onCardDetails} style={styles.card} />
<ScrollView style={styles.informationContainer}>
<LoyaltyCardInformation style={styles.information} storeId={storeId} />
</ScrollView>
<TextButton title={"Add Card"} onPress={onAddCard}></TextButton>
</View>
与相关样式:
container: {
minHeight: 0,
maxHeight: "60%",
flexDirection: "column"
},
card: {
zIndex: 2
},
informationContainer: {
marginTop: -15,
marginBottom: -15,
flexGrow: 1,
// height: 300,
padding: 15,
backgroundColor: "#f0f"
},
information: {
paddingTop: 15,
paddingBottom: 15
}
这给了我以下结果:
正如您所看到的,粉红色 informationContainer
并没有占据属性所指示的组件中的所有剩余空间 flexGrow
。
如果我检查检查器以查看是否有足够的空间,请参见下图:
如您所见,空间足够。那么如何让粉色容器占据所有可用空间呢?