fix: 修复安卓端帖子卡片点击事件冲突问题
- 为嵌套TouchableOpacity添加stopPropagation防止事件冒泡 - 修复grid模式下图片和用户头像点击事件 - 修复列表模式下所有交互按钮点击事件 - 优化手势配置添加shouldCancelWhenOutside
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user