问题描述
我有一个 Card
组件,可以在应用的仪表板页面上显示一个列表。整张卡片都包裹在 TouchableOpacity
中。我希望整个卡片都可以按下,链接到列表页面。
但是,我希望它的右下角不能按下,因为它包含一个 View
,上面有 2 个图标(一个喜欢按钮和一个消息按钮)。这些图标中的每一个都有自己的 onPress()
需要发生。
现在,如果您尝试点击右下角的图标,它只会触发整个 TouchableOpacity
这是 return
的 Card
语句:
return (
<Container>
<Cover style={{ backgroundColor: "red" }}>
<Image
source={{
width: 80,height: 90,url: "https://picsum.photos/200/300",}}
/>
</Cover>
<Content>
<Title>{props.name}</Title>
<PriceCaption>{"$" + props.price}</PriceCaption>
<View
style={{
position: "absolute",height: 35,width: 100,top: 45,right: 0,flexDirection: "row",alignItems: "Flex-end",}}
>
<TouchableOpacity
style={{
...styles.ButtonBackground,backgroundColor: null,left: 70,}}
onPress={() => {
launchChat();
}}
title={"message"}
>
<AntDesign name="mail" size={26} color={colours.purple} />
</TouchableOpacity>
<TouchableOpacity
style={{
...styles.ButtonBackground,marginLeft: 0,left: 10,}}
onPress={() => {
launchChat();
}}
title={"message"}
>
<AntDesign name="heart" size={26} color={colours.purple} />
</TouchableOpacity>
</View>
</Content>
</Container>);
是否有属性或方法可以从 View
中排除嵌套的 TouchableOpacity
?
注意:如果点击Icons
,它们仍然会触发各自的onPress()
,但是整个卡片仍然淡出,动画与如果您点击了卡片上的其他地方(因此用户对他们点击的位置的反馈很差)。