如何让react-native-deck-swiper的卡片铺满全屏？

问题根源 #

react-native-deck-swiper 组件默认给卡片设置了 cardVerticalMargin={20} 和 cardHorizontalMargin={10} 的内边距，这是卡片无法占满容器的核心原因——你之前设置的width/height:100%被默认边距抵消，所以只能调整宽度，高度始终有留白。另外Card组件内部的布局也可以优化，避免图片和文字的空间冲突。

解决步骤 #

1. 给Swiper组件添加参数移除默认边距
2. 优化Card组件内部布局，让图片和文字合理分配空间
3. 用屏幕高度计算swiper可用空间，避免被底部按钮遮挡

修改后的完整代码 #

主代码

import React, { useState } from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity, Dimensions } from "react-native";
import Swiper from 'react-native-deck-swiper'

// 获取屏幕高度，计算swiper可用空间
const { height: screenHeight } = Dimensions.get('window');
// 底部按钮区域预估高度，可根据实际情况调整
const bottomBarHeight = 120;

const Card = ({ name, image }) => (
    <View style={styles.card}>
        <Image source={{ uri: image }} style={styles.cardImage} resizeMode="cover" />
        <View style={styles.cardTextContainer}>
            <Text style={styles.cardText}>{name}</Text>
        </View>
    </View>
);

const Home = () => {
    const [cards, setCards] = useState([
        { id: 1, name: "User 1", image: "https://mir-s3-cdn-cf.behance.net/project_modules/disp/8e4ea335938337.5709522f2331e.gif" },
        { id: 2, name: "User 2", image: "https://mir-s3-cdn-cf.behance.net/project_modules/disp/8e4ea335938337.5709522f2331e.gif" },
        { id: 3, name: "User 3", image: "https://mir-s3-cdn-cf.behance.net/project_modules/disp/8e4ea335938337.5709522f2331e.gif" },
    ]);

    const swiperRef = React.createRef();

    const handleLike = () => {
        swiperRef.current.swipeRight();
    };

    const handleDislike = () => {
        swiperRef.current.swipeLeft();
    };

    return (
        <View style={{ flex: 1 }}>
            <Swiper
                ref={swiperRef}
                cards={cards}
                renderCard={(card) => <Card key={card.id} {...card} />}
                onSwiped={(cardIndex) => { console.log(cardIndex) }}
                onSwipedAll={() => { console.log('onSwipedAll') }}
                cardIndex={0}
                backgroundColor={'#4FD0E9'}
                stackSize={3}
                containerStyle={styles.swiperContainer}
                // 移除默认的卡片边距
                cardVerticalMargin={0}
                cardHorizontalMargin={0}
                // 设置swiper高度为屏幕高度减去底部按钮区域
                height={screenHeight - bottomBarHeight}
            />
            <View style={styles.bottomButtons}>
                <TouchableOpacity onPress={handleDislike} style={styles.buttonSide}>
                    <Image source={require('../../assets/imgs/icons/tabs/home/flecha.png')} style={styles.imageSide} />
                </TouchableOpacity>
                <TouchableOpacity onPress={handleLike} style={styles.button}>
                    <Image source={require('../../assets/imgs/icons/tabs/home/x.png')} style={styles.image} />
                </TouchableOpacity>
                <TouchableOpacity onPress={handleDislike} style={styles.buttonCenter}>
                    <Image source={require('../../assets/imgs/icons/tabs/home/msg.png')} style={styles.imageCenter} />
                </TouchableOpacity>
                <TouchableOpacity onPress={handleLike} style={styles.button}>
                    <Image source={require('../../assets/imgs/icons/tabs/home/like.png')} style={styles.image} />
                </TouchableOpacity>
                <TouchableOpacity onPress={handleLike} style={styles.buttonSide}>
                    <Image source={require('../../assets/imgs/icons/tabs/home/estrela.png')} style={styles.imageSide} />
                </TouchableOpacity>
            </View>
        </View>
    );
};

样式代码

const styles = StyleSheet.create({
    swiperContainer: {
        flex: 1,
    },
    image: {
        width: 40,
        height: 40,
    },
    imageSide: {
        width: 20,
        height: 20,
    },
    imageCenter: {
        width: 20,
        height: 20,
        right: 1,
        top: 2
    },

    card: {
        flex: 1,
        borderRadius: 10,
        borderWidth: 2,
        borderColor: "#E8E8E8",
        backgroundColor: "white",
        overflow: 'hidden',
        width: '100%',
        height: '100%',
        flexDirection: 'column', // 垂直布局图片和文字
    },

    cardImage: {
        flex: 1, // 图片占满剩余空间
        width: '100%',
    },
    cardTextContainer: {
        paddingVertical: 10,
        paddingHorizontal: 15,
        backgroundColor: 'white', // 避免图片覆盖文字区域
    },
    cardText: {
        fontSize: 20,
    },
    bottomButtons: {
        flexDirection: "row",
        justifyContent: "space-around",
        position: "absolute",
        bottom: 20,
        left: 0,
        right: 0,
    },
    button: {
        backgroundColor: "white",
        borderRadius: 50,
        padding: 15,
    },
    buttonSide: {
        marginTop: 30,
        backgroundColor: "white",
        borderRadius: 50,
        padding: 15,
    },
    buttonCenter: {
        marginTop: 30,
        backgroundColor: "#8734C9",
        borderRadius: 50,
        padding: 10,
        borderWidth: 4,
        borderColor: 'white'
    },
});

额外说明 #

• cardVerticalMargin 和 cardHorizontalMargin 设置为0是关键，直接移除了组件默认的留白
• 用Dimensions获取屏幕高度并减去按钮区域高度，确保swiper不会被遮挡，卡片能占满可用空间
• 优化Card组件布局后，图片会自动占满大部分高度，文字固定在底部，避免布局混乱

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