React Native布局问题：FlatList与灰色View间距及卡片对齐修复

问题1：缩小FlatList与灰色View之间的空白 #

当前布局中，FlatList和下方灰色区域的间距来自三处样式叠加：

• flatList的marginBottom:10
• flatListContent的paddingBottom:20
• wrapper的paddingTop:20

调整方案：

• 移除flatListContent的paddingBottom，或设置为5以内的小值
• 将flatList的marginBottom调至5
• 将wrapper的paddingTop调至10

问题2：修复两张展示卡片的对齐问题 #

当前activityContainer和activityRow缺少对齐配置，且卡片未分配均等宽度，导致对齐失效。调整方案：

1. 给activityContainer添加alignItems: 'center'，确保内部元素垂直居中
2. 给activityRow设置flex:1，让它占据右侧剩余空间，同时添加justifyContent: 'space-around'让卡片均匀分布
3. 确保OrarioCheckIn和OrarioCheckOut组件内部设置flex:1，平分可用宽度

修改后的关键代码片段 #

// FlatList间距调整
flatList: {
    marginBottom: 5, // 减小底部间距
},
flatListContent: {
    // 移除paddingBottom或设为更小值
},
wrapper: {
    flex: 1,
    backgroundColor: "#F9F9F9",
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingTop: 10, // 减小顶部内边距
},

// 卡片对齐调整
activityContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 15,
    alignItems: 'center', // 垂直居中
},
activityRow: {
    flexDirection: "row",
    flex: 1, // 占据右侧空间
    justifyContent: 'space-around', // 均匀分布卡片
},

同时在OrarioCheckIn和OrarioCheckOut组件的样式中添加：

container: {
    flex: 1,
    // 其他原有样式
}

完整修改后的styles代码 #

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "white",
    },
    header: {
        flexDirection: "row",
        justifyContent: "space-between",
        padding: 15,
    },
    profileImage: {
        width: 50,
        height: 50,
        borderRadius: 25,
    },
    notificationIcon: {
        fontSize: 24,
    },
    wrapper: {
        flex: 1,
        backgroundColor: "#F9F9F9",
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        paddingTop: 10,
    },
    flatList: {
        marginBottom: 5,
    },
    flatListContent: {
        // 移除paddingBottom
    },
    dateItem: {
        width: itemWidth,
        height: 80,
        borderWidth: 1,
        borderColor: "lightgrey",
        backgroundColor: "white",
        justifyContent: "center",
        alignItems: "center",
        margin: margin,
        borderRadius: 10,
    },
    dateNumber: {
        fontFamily: "KumbhSans-Bold",
        fontSize: 24,
    },
    dateWeekday: {
        fontFamily: "KumbhSans-Regular",
        fontSize: 16,
    },
    contentWrapper: {
        paddingHorizontal: 10,
        flex: 1,
    },
    activityContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        padding: 15,
        alignItems: 'center',
    },
    heading: {
        fontFamily: "KumbhSans-Bold",
        fontSize: 20,
        marginLeft: 15,
        marginBottom: 10,
    },
    activityRow: {
        flexDirection: "row",
        flex: 1,
        justifyContent: 'space-around',
    },
    userActivitiesContainer: {
        flex: 1,
        marginBottom: 10,
    },
    userActivities: {
        flex: 1,
    },
    noActivityText: {
        textAlign: "center",
        fontFamily: "KumbhSans-Bold",
        color: "gray",
        fontSize: 15,
        marginTop: 10,
    },
    actionButton: {
        height: 50,
        backgroundColor: "#3B82F6",
        marginBottom: 20,
        marginHorizontal: 20,
    },
    actionButtonText: {
        fontFamily: "KumbhSans-Regular",
        fontSize: 20,
    },
});

内容的提问来源于stack exchange，提问作者Skerdi Velo