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