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

Question

我在 TouchableOpacity 中使用 Card 元素。

当我按下它时，卡片背景颜色太烦人了 w.r.t 不透明度。

当我 remove 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