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

Question

我在 TouchableOpacity使用Card元素 。

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

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

当我使用borderRadius时 ，会出现这个问题

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

问题：

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

我怎样才能给出相同的颜色，所以当按下卡片时，没有显示卡片白色背景颜色？

组件.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>

样式.js

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

    },
    cardContentStyle: {
        flexDirection: 'row',

    },

实际输出

期望的输出

标签： react-nativereact-native-androidreact-native-elements

Answer 1

将 TouchableOpacity 放入卡片并使用：

样式={ ...StyleSheet.absoluteFillObject }

原因 StyleSheet 必须被导入