reactjs - 使用 flex:1 导致卡片堆叠,没有 flex 显示列表但没有滚动
问题描述
我试图有一个卡片列表以垂直显示。目前只有一张卡片和其他一些样式,一切都可以正常显示
但是滚动不起作用。
进一步阅读显然我必须设置一个包含所有内容的视图并将 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;
解决方案
推荐阅读
- git - Github 不会更新对分支和 heroku 的推送
- python - 我应该在机器学习服务器上设置 OMP_NUM_THREADS=1 吗?
- python - 如何从另一个类中的函数更改类变量
- javascript - 每个域的唯一会话 - NodeJS - Express 会话
- react-native - 反应导航 5,在第二个堆栈屏幕上隐藏底部标签栏?
- azure - 无法使用 C# 代码使用表单识别器客户端库从跨多个页面的 pdf 文件中读取相同的表数据
- google-apps-script - 简化谷歌表格中的重复公式计算
- excel - 通过 VBA 将数据发送到另一个工作簿
- javascript - Adyencheckout 不是构造函数 - NextJS
- javascript - 调用另一个函数之前的回调函数调用