[英]Using flex:1 causes cards to stack, without flex shows list but no scrolling
林试图有一张卡的列表以垂直显示。 目前只有一张卡片和其他样式,一切都可以正确显示
但是滚动不起作用。
显然,要进一步阅读,我必须设置一个包装所有内容的视图并将flex设置为1。但是当我这样做时,似乎卡可能会彼此堆叠
下面是我的CardDetails.js代码,其中CardFlip封装了所有内容,并将flex设置为1。如果我注释掉flex 1,则会得到第一个屏幕截图。
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
cardFlip: {
flex: 1,
alignItems: 'center',
},
cardStyle: {
//flex: 1,
height: 150,
width: 350,
marginBottom: 10,
marginTop: 10,
padding: 5,
backgroundColor: '#FFF',
borderRadius: 3,
elevation: 2,
shadowColor: '#000000',
shadowOpacity: 0.3,
shadowRadius: 1,
shadowOffset: {
height: 1,
width: 0.3,
}
},
topContainerStyle: {
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
// borderWidth: 0.5,
borderColor: 'green',
},
containerStyle: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 2,
// borderWidth: 0.5,
// borderTopColor: 'red',
},
viewStyle: {
alignItems: 'center',
borderColor: 'red',
},
dayStyle: {
color: 'red',
fontSize: 14,
fontWeight: 'bold',
},
headerStyle: {
fontSize: 14,
fontWeight: 'bold',
},
masjidStyle: {
alignItems: 'center',
paddingBottom: 15,
paddingTop: 5
},
masjidFontStyle: {
color: 'blue',
fontSize: 15,
fontWeight: 'bold',
},
dateFontStyle: {
fontSize: 20
}
});
const CardDetails = (props) => {
const {
topContainerStyle,
cardFlip,
cardStyle,
masjidFontStyle,
containerStyle,
masjidStyle,
viewStyle,
dayStyle,
dateFontStyle
} = styles;
return (
<View style={cardFlip}>
<View style={cardStyle}>
<View style={masjidStyle}>
<Text style={dateFontStyle}> {props.date1}</Text>
</View>
<View style={containerStyle}>
<View style={viewStyle}>
<Text style={dayStyle}> Doctor: </Text>
<Text> {props.doc1} </Text>
</View>
<View style={viewStyle}>
<Text style={masjidFontStyle}> Nurse: </Text>
<Text> {props.nur1} </Text>
</View>
<View style={viewStyle}>
<Text style={dayStyle}> Volunteers: </Text>
<Text> {props.vol1} </Text>
<Text> {props.vol2} </Text>
</View>
</View>
</View>
</View>
);
};
export default CardDetails;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.