React Native FlatList添加按钮仅显示在第一列问题求助

我是React Native初学者，尝试在FlatList的每个列表项上方放置添加按钮，但按钮仅显示在第一列的列表项上。

我的FlatList代码

<FlatList
    data={prodListPerCategory}
    keyExtractor={(prd) => (prd.id)}
    renderItem={({ item }) => (
        <ProductCard
            key={item.id}
            image={item.images[0].src}
            title={item.name}
            price={item.price}
            onPress={() => navigation.navigate('SearchedProduct', item)}
        />
    )}
    numColumns={3}
/>

我的ProductCard组件代码

const ProductCard = ({ image, title, price, onPress }) => {
    return (
       <>
             <TouchableOpacity style={styles.addBtn} onPress={()=>{alert('Item Added')}}>
                    <Image source={require('../Assets/PNGs/Products/add.png')} resizeMode={'contain'} style={{width:15, height:15}}  />
             </TouchableOpacity>
            <TouchableOpacity style={styles.container} onPress={onPress}>
           <View style={styles.card}>
               <Image source={{uri:`${image}`}} resizeMode='stretch' style={{ width: '80%', height: '80%' }} />
           </View>
           <View style={styles.titleView}>
               <Text numberOfLines={2} style={styles.titleStyle}>{title}</Text>
               <Text style={styles.priceText}>${price}</Text>
           </View>
       </TouchableOpacity>
       </>    
    );
};

const styles = StyleSheet.create({
    container: {
        justifyContent: 'space-between',
        width: width * (25 / 100),
        height: height * (22 / 100),
        marginHorizontal: '3.5%',
        marginBottom: '2%',
    },
    card: {
        height: '60%',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 5,
        borderRadius: 5,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        backgroundColor: 'white',
    },
    titleView: { 
        flex: 0.9, 
        alignItems: 'center', 
    },
    titleStyle: {
        width: '100%', 
        fontSize: 12, 
        textAlign: 'center', 
        color: '#6E1033', 
        fontWeight: '500',
    },
    priceText:{
        color:'#400D33',
        fontSize:10,
        fontWeight:'300',
        textAlign:'center',
        paddingTop:5
    },
    addBtn:{
        backgroundColor:'white', 
        position:'absolute', 
        left:'23%',
        width:'10%', 
        height:'15%',
        justifyContent:'center',
        alignItems:'center',
        borderRadius: 5,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        zIndex:1
    }
});

export default ProductCard;

效果截图

问题原因 #

addBtn使用position: absolute且设置left: '23%'时，这个百分比是相对于FlatList的列容器（所有列表项的共同父容器）计算的，而非每个ProductCard自身的容器。多列布局下，所有按钮都会参照同一个父容器定位，导致只有第一列的按钮位置在可视区域内，其他列的按钮被挤出或重叠到第一列。

解决方案 #

把添加按钮嵌套到每个ProductCard的容器内部，让绝对定位参照自身卡片容器，同时调整定位样式：

const ProductCard = ({ image, title, price, onPress }) => {
    return (
        <TouchableOpacity style={styles.container} onPress={onPress}>
            {/* 将添加按钮放到container内部 */}
            <TouchableOpacity style={styles.addBtn} onPress={(e) => {
                e.stopPropagation(); // 阻止点击按钮触发外层卡片跳转
                alert('Item Added');
            }}>
                <Image source={require('../Assets/PNGs/Products/add.png')} resizeMode={'contain'} style={{width:15, height:15}}  />
            </TouchableOpacity>
            <View style={styles.card}>
                <Image source={{uri:`${image}`}} resizeMode='stretch' style={{ width: '80%', height: '80%' }} />
            </View>
            <View style={styles.titleView}>
                <Text numberOfLines={2} style={styles.titleStyle}>{title}</Text>
                <Text style={styles.priceText}>${price}</Text>
            </View>
        </TouchableOpacity>    
    );
};

const styles = StyleSheet.create({
    // 保留原有其他样式
    addBtn:{
        backgroundColor:'white', 
        position:'absolute', 
        top: -10, // 向上偏移到卡片上方
        alignSelf: 'center', // 基于自身容器水平居中
        width:30,
        height:30,
        justifyContent:'center',
        alignItems:'center',
        borderRadius: 5,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        zIndex:1
    }
});

关键修改点 #

1. 将addBtn移入container内部，让绝对定位的参照对象变为每个独立的卡片容器
2. 移除left: '23%'，改用alignSelf: 'center'实现按钮在卡片上方居中显示
3. 添加e.stopPropagation()，避免点击添加按钮时触发卡片的跳转事件
4. 用固定宽高替代基于屏幕的百分比，确保按钮尺寸适配不同卡片

内容的提问来源于stack exchange，提问作者Syed Bilal Haider