如何在TouchableOpacity onPress上更改卡片的背景颜色

Question

我在TouchableOpacity内部使用 Card 元素 。

当我按下它时，卡片背景色太不透明了。

当我删除borderRadius 时，此问题不会发生。

当我使用borderRadius 时，出现此问题

我已经看到了我正在使用的所有组件道具，但对我没有任何帮助。

问题：

当我在Card containerStyle中使用borderRadius时，TouchableOpacity颜色与Card颜色不匹配。大约是相反的。

我该如何赋予相同的颜色，以便在按下卡时没有显示卡白色背景色？

Component.js

               <TouchableOpacity>
                            <Card
                            containerStyle={styles.MainCardStyle}
                            transparent>
                                <CardItem
                                    cardBody
                                    >
                                    <View style= 
                                       {styles.cardContentStyle}>
                                        <Image
                                            style={styles.iconStyle}
                                            resizeMode="contain"
                                            source= 
                                   {require('../../assets/database.png')}
                                        />
                                        <Text style= 
                               {styles.cardTextStyle}>Setting</Text>
                                    </View>
                                </CardItem>
                            </Card>
             </TouchableOpacity>

styles.js

export const styles=({
    MainCardStyle: {
         borderRadius: 16,

    },
    cardContentStyle: {
        flexDirection: 'row',

    },

实际输出

所需的输出

Answer 1

将TouchableOpacity放入卡中并使用：

style = {... StyleSheet.absoluteFillObject}

必须导入StyleSheet的原因