fix: 修复安卓端帖子卡片点击事件冲突问题
Some checks failed
Frontend CI / ota-android (push) Failing after 4m51s
Frontend CI / build-and-push-web (push) Has been cancelled
Frontend CI / build-android-apk (push) Has been cancelled

- 为嵌套TouchableOpacity添加stopPropagation防止事件冒泡
- 修复grid模式下图片和用户头像点击事件
- 修复列表模式下所有交互按钮点击事件
- 优化手势配置添加shouldCancelWhenOutside
This commit is contained in:
lafay
2026-03-18 14:21:24 +08:00
parent a6cdb97e24
commit 937e8112f4
2 changed files with 60 additions and 11 deletions

View File

@@ -362,6 +362,20 @@ const PostCard: React.FC<PostCardProps> = ({
const gridUsernameFontSize = isDesktop ? 14 : 12;
const gridLikeFontSize = isDesktop ? 14 : 12;
const handleContainerPress = () => {
onPress();
};
const handleImagePress = (e: any) => {
e.stopPropagation();
onImagePress?.(post.images || [], 0);
};
const handleUserPress = (e: any) => {
e.stopPropagation();
onUserPress();
};
return (
<TouchableOpacity
style={[
@@ -369,14 +383,14 @@ const PostCard: React.FC<PostCardProps> = ({
!hasImage && styles.gridContainerNoImage,
isDesktop && styles.gridContainerDesktop
]}
onPress={onPress}
onPress={handleContainerPress}
activeOpacity={0.9}
>
{/* 封面图 - 只有有图片时才渲染,无图时不显示占位区域 */}
{hasImage && (
<TouchableOpacity
activeOpacity={0.8}
onPress={() => onImagePress?.(post.images || [], 0)}
onPress={handleImagePress}
>
<SmartImage
source={{ uri: coverUrl }}
@@ -424,7 +438,7 @@ const PostCard: React.FC<PostCardProps> = ({
{/* 底部信息 */}
<View style={[styles.gridFooter, isDesktop && styles.gridFooterDesktop]}>
<TouchableOpacity style={styles.gridUserInfo} onPress={onUserPress}>
<TouchableOpacity style={styles.gridUserInfo} onPress={handleUserPress}>
<Avatar
source={author.avatar}
size={isDesktop ? 24 : 20}
@@ -462,6 +476,40 @@ const PostCard: React.FC<PostCardProps> = ({
return 3;
}, [isWideScreen, isDesktop, isTablet]);
const handleContainerPress = () => {
onPress();
};
const handleUserPress = (e: any) => {
e.stopPropagation();
onUserPress();
};
const handleLikePress = (e: any) => {
e.stopPropagation();
onLike();
};
const handleCommentPress = (e: any) => {
e.stopPropagation();
onComment();
};
const handleSharePress = (e: any) => {
e.stopPropagation();
onShare();
};
const handleBookmarkPress = (e: any) => {
e.stopPropagation();
onBookmark();
};
const handleDeletePress = (e: any) => {
e.stopPropagation();
handleDelete();
};
return (
<TouchableOpacity
style={[
@@ -481,12 +529,12 @@ const PostCard: React.FC<PostCardProps> = ({
} : {})
}
]}
onPress={onPress}
onPress={handleContainerPress}
activeOpacity={0.9}
>
{/* 用户信息 */}
<View style={styles.userSection}>
<TouchableOpacity onPress={onUserPress}>
<TouchableOpacity onPress={handleUserPress}>
<Avatar
source={author.avatar}
size={avatarSize}
@@ -495,7 +543,7 @@ const PostCard: React.FC<PostCardProps> = ({
</TouchableOpacity>
<View style={styles.userInfo}>
<View style={styles.userNameRow}>
<TouchableOpacity onPress={onUserPress}>
<TouchableOpacity onPress={handleUserPress}>
<Text
variant="body"
style={[
@@ -529,7 +577,7 @@ const PostCard: React.FC<PostCardProps> = ({
{isPostAuthor && onDelete && (
<TouchableOpacity
style={styles.deleteButton}
onPress={handleDelete}
onPress={handleDeletePress}
disabled={isDeleting}
>
<MaterialCommunityIcons
@@ -605,7 +653,7 @@ const PostCard: React.FC<PostCardProps> = ({
</View>
<View style={styles.actionButtons}>
<TouchableOpacity style={[styles.actionButton, ...(isDesktop ? [styles.actionButtonWide] : [])]} onPress={onLike}>
<TouchableOpacity style={[styles.actionButton, ...(isDesktop ? [styles.actionButtonWide] : [])]} onPress={handleLikePress}>
<MaterialCommunityIcons
name={post.is_liked ? 'heart' : 'heart-outline'}
size={isDesktop ? 22 : 19}
@@ -620,7 +668,7 @@ const PostCard: React.FC<PostCardProps> = ({
</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.actionButton, ...(isDesktop ? [styles.actionButtonWide] : [])]} onPress={onComment}>
<TouchableOpacity style={[styles.actionButton, ...(isDesktop ? [styles.actionButtonWide] : [])]} onPress={handleCommentPress}>
<MaterialCommunityIcons
name="comment-outline"
size={isDesktop ? 22 : 19}
@@ -631,7 +679,7 @@ const PostCard: React.FC<PostCardProps> = ({
</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.actionButton, ...(isDesktop ? [styles.actionButtonWide] : [])]} onPress={onShare}>
<TouchableOpacity style={[styles.actionButton, ...(isDesktop ? [styles.actionButtonWide] : [])]} onPress={handleSharePress}>
<MaterialCommunityIcons
name="share-outline"
size={isDesktop ? 22 : 19}
@@ -639,7 +687,7 @@ const PostCard: React.FC<PostCardProps> = ({
/>
</TouchableOpacity>
<TouchableOpacity style={[styles.actionButton, isDesktop && styles.actionButtonWide]} onPress={onBookmark}>
<TouchableOpacity style={[styles.actionButton, isDesktop && styles.actionButtonWide]} onPress={handleBookmarkPress}>
<MaterialCommunityIcons
name={post.is_favorited ? 'bookmark' : 'bookmark-outline'}
size={isDesktop ? 22 : 19}

View File

@@ -320,6 +320,7 @@ export const HomeScreen: React.FC = () => {
.runOnJS(true)
.activeOffsetX([-15, 15])
.failOffsetY([-20, 20])
.shouldCancelWhenOutside(true)
.onEnd((event) => {
const now = Date.now();
if (now - lastSwipeAtRef.current < SWIPE_COOLDOWN_MS) {