Remove unnecessary console logs and replace them with void expressions for better performance and cleaner code. Update error logging to use console.error for consistency. This change enhances code readability and reduces console noise during execution.
This commit is contained in:
115
src/components/business/PostCard/PostCardGrid.tsx
Normal file
115
src/components/business/PostCard/PostCardGrid.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* PostCardGrid 容器组件
|
||||
* 网格模式(小红书风格)的帖子卡片容器
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { TouchableOpacity, StyleSheet, StyleProp, ViewStyle, GestureResponderEvent } from 'react-native';
|
||||
import { colors, borderRadius } from '../../../theme';
|
||||
import { useResponsive } from '../../../hooks/useResponsive';
|
||||
import { PostCardGridProps } from './types';
|
||||
import { usePostCardActions } from './hooks/usePostCardActions';
|
||||
import { usePostGridStyles } from './hooks/usePostCardStyles';
|
||||
import { PostGridCover, PostGridInfo } from './components';
|
||||
import { convertToImageGridItems, getConsistentAspectRatio } from './utils';
|
||||
|
||||
const PostCardGrid: React.FC<PostCardGridProps> = ({
|
||||
post,
|
||||
onAction,
|
||||
features,
|
||||
style,
|
||||
}) => {
|
||||
const { isDesktop } = useResponsive();
|
||||
const gridStyles = usePostGridStyles();
|
||||
|
||||
const {
|
||||
handlePress,
|
||||
handleUserPress,
|
||||
handleImagePress,
|
||||
} = usePostCardActions(onAction);
|
||||
|
||||
// 防御性检查:确保 author 存在
|
||||
const author = post.author ?? {
|
||||
id: '',
|
||||
nickname: '匿名用户',
|
||||
avatar: '',
|
||||
username: '',
|
||||
cover_url: '',
|
||||
bio: '',
|
||||
website: '',
|
||||
location: '',
|
||||
posts_count: 0,
|
||||
followers_count: 0,
|
||||
following_count: 0,
|
||||
created_at: '',
|
||||
};
|
||||
|
||||
// 获取封面图(第一张图)
|
||||
const coverImage = post.images && post.images.length > 0 ? post.images[0] : null;
|
||||
|
||||
// 根据帖子 ID 生成一致的宽高比
|
||||
const aspectRatio = getConsistentAspectRatio(post.id);
|
||||
|
||||
// 样式计算
|
||||
const containerStyle: StyleProp<ViewStyle> = [
|
||||
styles.container,
|
||||
!coverImage && styles.containerNoImage,
|
||||
isDesktop && styles.containerDesktop,
|
||||
];
|
||||
|
||||
const handleContainerPress = () => {
|
||||
handlePress();
|
||||
};
|
||||
|
||||
const handleImagePressLocal = () => {
|
||||
if (post.images && post.images.length > 0) {
|
||||
handleImagePress(convertToImageGridItems(post.images), 0);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUserPressLocal = () => {
|
||||
handleUserPress();
|
||||
};
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[containerStyle, style]}
|
||||
onPress={handleContainerPress}
|
||||
activeOpacity={0.9}
|
||||
>
|
||||
{/* 封面 */}
|
||||
<PostGridCover
|
||||
image={coverImage}
|
||||
content={post.content}
|
||||
isVote={post.is_vote}
|
||||
aspectRatio={aspectRatio}
|
||||
onImagePress={handleImagePressLocal}
|
||||
/>
|
||||
|
||||
{/* 标题和信息 */}
|
||||
<PostGridInfo
|
||||
title={post.title}
|
||||
author={author}
|
||||
likesCount={post.likes_count}
|
||||
onUserPress={handleUserPressLocal}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: '#FFF',
|
||||
overflow: 'hidden',
|
||||
borderRadius: 8,
|
||||
},
|
||||
containerDesktop: {
|
||||
borderRadius: 12,
|
||||
},
|
||||
containerNoImage: {
|
||||
minHeight: 200,
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
});
|
||||
|
||||
export default PostCardGrid;
|
||||
Reference in New Issue
Block a user