bowong
/
expo-popcore-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: bug

This commit is contained in:
imeepos 2026-01-28 18:54:38 +08:00
parent 7c50d396e9
commit 7f84a348a7
7 changed files with 126 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/(tabs)/index.tsx
View File

@ -13,7 +13,7 @@ import {
} from 'react-native'
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
import { TitleBar, HeroSlider, TabNavigation, TemplateCard } from '@/components/blocks/home'
import { TitleBar, HeroSlider, TabNavigation, TemplateCard, TemplateGrid } from '@/components/blocks/home'
import ErrorState from '@/components/ErrorState'
import LoadingState from '@/components/LoadingState'
import { useActivates } from '@/hooks/use-activates'
@ -23,6 +23,8 @@ import { useStickyTabs } from '@/hooks/use-sticky-tabs'
import { useTabNavigation } from '@/hooks/use-tab-navigation'
import { useTemplateFilter } from '@/hooks/use-template-filter'
import { useUserBalance } from '@/hooks/use-user-balance'
import { useTemplateLike, useTemplateFavorite } from '@/hooks'
import { useTemplateSocialStore } from '@/stores/templateSocialStore'
const NUM_COLUMNS = 3
const HORIZONTAL_PADDING = 16
@ -151,6 +153,37 @@ export default function HomeScreen() {
params: { id },
}), [router])
// 使用 Store 中的点赞/收藏状态
const { setLiked, setFavorited } = useTemplateSocialStore()
// 点赞处理
const handleLike = useCallback((id: string) => {
const currentState = setLiked(id, true) // 乐观更新
// TODO: 调用 API
console.log('Like template:', id)
}, [setLiked])
// 取消点赞处理
const handleUnlike = useCallback((id: string) => {
const currentState = setLiked(id, false) // 乐观更新
// TODO: 调用 API
console.log('Unlike template:', id)
}, [setLiked])
// 收藏处理
const handleFavorite = useCallback((id: string) => {
const currentState = setFavorited(id, true) // 乐观更新
// TODO: 调用 API
console.log('Favorite template:', id)
}, [setFavorited])
// 取消收藏处理
const handleUnfavorite = useCallback((id: string) => {
const currentState = setFavorited(id, false) // 乐观更新
// TODO: 调用 API
console.log('Unfavorite template:', id)
}, [setFavorited])
// 渲染模板卡片
const renderTemplateItem = useCallback(({ item }: { item: typeof filteredTemplates[0] }) => {
if (!item.id) return null
@ -167,9 +200,13 @@ export default function HomeScreen() {
onPress={handleTemplatePress}
liked={'isLiked' in item ? item.isLiked : undefined}
favorited={'isFavorited' in item ? item.isFavorited : undefined}
onLike={handleLike}
onUnlike={handleUnlike}
onFavorite={handleFavorite}
onUnfavorite={handleUnfavorite}
/>
)
}, [handleTemplatePress])
}, [handleTemplatePress, handleLike, handleUnlike, handleFavorite, handleUnfavorite])
// 提取 key
const keyExtractor = useCallback((item: typeof filteredTemplates[0]) => item.id || '', [])

32
app/(tabs)/favorites.tsx → app/favorites.tsx
View File

@ -17,6 +17,7 @@ import { TitleBar, TemplateCard } from '@/components/blocks/home'
import ErrorState from '@/components/ErrorState'
import LoadingState from '@/components/LoadingState'
import { useUserFavorites } from '@/hooks/use-user-favorites'
import { useTemplateSocialStore } from '@/stores/templateSocialStore'
const NUM_COLUMNS = 2
const HORIZONTAL_PADDING = 16
@ -34,6 +35,9 @@ export default function FavoritesScreen() {
const insets = useSafeAreaInsets()
const router = useRouter()
// 使用 Store 中的点赞/收藏状态
const { setLiked, setFavorited } = useTemplateSocialStore()
// 获取收藏列表
const {
favorites,
@ -82,6 +86,28 @@ export default function FavoritesScreen() {
})
}, [router])
// 点赞/取消点赞处理
const handleLike = useCallback((id: string) => {
setLiked(id, true)
console.log('Like template:', id)
}, [setLiked])
const handleUnlike = useCallback((id: string) => {
setLiked(id, false)
console.log('Unlike template:', id)
}, [setLiked])
// 收藏/取消收藏处理
const handleFavorite = useCallback((id: string) => {
setFavorited(id, true)
console.log('Favorite template:', id)
}, [setFavorited])
const handleUnfavorite = useCallback((id: string) => {
setFavorited(id, false)
console.log('Unfavorite template:', id)
}, [setFavorited])
// 状态判断
const isLoading = useMemo(() => loading, [loading])
const showEmptyState = useMemo(() =>
@ -111,9 +137,13 @@ export default function FavoritesScreen() {
onPress={handleTemplatePress}
liked={template.isLiked}
favorited={template.isFavorited}
onLike={handleLike}
onUnlike={handleUnlike}
onFavorite={handleFavorite}
onUnfavorite={handleUnfavorite}
/>
)
}, [handleTemplatePress])
}, [handleTemplatePress, handleLike, handleUnlike, handleFavorite, handleUnfavorite])
// 提取 key
const keyExtractor = useCallback((item: typeof favorites[0]) => item.id, [])

0
app/(tabs)/likes.test.tsx → app/likes.test.tsx
View File

32
app/(tabs)/likes.tsx → app/likes.tsx
View File

@ -17,6 +17,7 @@ import { TemplateCard } from '@/components/blocks/home'
import ErrorState from '@/components/ErrorState'
import LoadingState from '@/components/LoadingState'
import { useUserLikes } from '@/hooks'
import { useTemplateSocialStore } from '@/stores/templateSocialStore'
const NUM_COLUMNS = 2
const HORIZONTAL_PADDING = 16
@ -35,6 +36,9 @@ export default function LikesScreen() {
const router = useRouter()
const [refreshing, setRefreshing] = useState(false)
// 使用 Store 中的点赞/收藏状态
const { setLiked, setFavorited } = useTemplateSocialStore()
// 获取用户点赞列表
const {
likes,
@ -74,6 +78,28 @@ export default function LikesScreen() {
})
}, [router])
// 点赞/取消点赞处理
const handleLike = useCallback((id: string) => {
setLiked(id, true)
console.log('Like template:', id)
}, [setLiked])
const handleUnlike = useCallback((id: string) => {
setLiked(id, false)
console.log('Unlike template:', id)
}, [setLiked])
// 收藏/取消收藏处理
const handleFavorite = useCallback((id: string) => {
setFavorited(id, true)
console.log('Favorite template:', id)
}, [setFavorited])
const handleUnfavorite = useCallback((id: string) => {
setFavorited(id, false)
console.log('Unfavorite template:', id)
}, [setFavorited])
// 状态判断
const showEmptyState = useMemo(() =>
!loading && !error && likes.length === 0,
@ -107,9 +133,13 @@ export default function LikesScreen() {
onPress={handleTemplatePress}
liked={item.template.isLiked}
favorited={item.template.isFavorited}
onLike={handleLike}
onUnlike={handleUnlike}
onFavorite={handleFavorite}
onUnfavorite={handleUnfavorite}
/>
)
}, [handleTemplatePress])
}, [handleTemplatePress, handleLike, handleUnlike, handleFavorite, handleUnfavorite])
// 提取 key
const keyExtractor = useCallback((item: typeof likes[0]) => item.id || '', [])

13
components/blocks/home/TemplateCard.tsx
View File

@ -4,6 +4,7 @@ import { Image } from 'expo-image'
import { LinearGradient } from 'expo-linear-gradient'
import { Ionicons } from '@expo/vector-icons'
import { useTranslation } from 'react-i18next'
import { useTemplateSocialStore } from '@/stores/templateSocialStore'
export interface TemplateCardProps {
id?: string
@ -65,8 +66,8 @@ const TemplateCardComponent: React.FC<TemplateCardProps> = ({
aspectRatio: aspectRatioString,
cardWidth,
onPress,
liked,
favorited,
liked: likedProp,
favorited: favoritedProp,
onLike,
onUnlike,
onFavorite,
@ -74,6 +75,14 @@ const TemplateCardComponent: React.FC<TemplateCardProps> = ({
testID,
}) => {
const { i18n } = useTranslation()
// 获取 Store 中的状态（用于本地状态覆盖）
const { isLiked: isLikedInStore, isFavorited: isFavoritedInStore } = useTemplateSocialStore()
// 合并 props 状态和 store 状态：store 优先（乐观更新）
const liked = id !== undefined ? isLikedInStore(id) ?? likedProp : likedProp
const favorited = id !== undefined ? isFavoritedInStore(id) ?? favoritedProp : favoritedProp
const aspectRatio = useMemo(() => parseAspectRatio(aspectRatioString), [aspectRatioString])
const imageUri = useMemo(() => getImageUri(webpPreviewUrl, previewUrl, coverImageUrl), [webpPreviewUrl, previewUrl, coverImageUrl])

12
components/blocks/home/TemplateGrid.tsx
View File

@ -9,6 +9,10 @@ export type Template = CategoryTemplate | TemplateDetail
export interface TemplateGridProps {
templates: Template[]
onTemplatePress: (id: string) => void
onLike?: (id: string) => void
onUnlike?: (id: string) => void
onFavorite?: (id: string) => void
onUnfavorite?: (id: string) => void
numColumns?: number
horizontalPadding?: number
cardGap?: number
@ -34,6 +38,10 @@ export function calculateCardWidth(
const TemplateGridComponent: React.FC<TemplateGridProps> = ({
templates,
onTemplatePress,
onLike,
onUnlike,
onFavorite,
onUnfavorite,
numColumns = 3,
horizontalPadding = 16,
cardGap = 5,
@ -75,6 +83,10 @@ const TemplateGridComponent: React.FC<TemplateGridProps> = ({
onPress={onTemplatePress}
liked={'isLiked' in template ? template.isLiked : undefined}
favorited={'isFavorited' in template ? template.isFavorited : undefined}
onLike={onLike}
onUnlike={onUnlike}
onFavorite={onFavorite}
onUnfavorite={onUnfavorite}
testID={`template-card-${template.id}`}
/>
))}

8
components/blocks/ui/FavoriteButton.tsx
View File

@ -26,8 +26,7 @@ const FavoriteButtonComponent: React.FC<FavoriteButtonProps> = ({
}
}, [loading, onPress])
// 缓存样式计算
const iconStyle = useMemo(() => [styles.icon, { fontSize: size }], [size])
// 缓存样式计算 - 移除不必要的 iconStyle
const containerStyle = useMemo(
() => [styles.container, loading && styles.disabled],
[loading]
@ -45,7 +44,7 @@ const FavoriteButtonComponent: React.FC<FavoriteButtonProps> = ({
style={containerStyle}
>
<View style={styles.content}>
<Ionicons name={iconName} size={size} color={iconColor} style={iconStyle} />
<Ionicons name={iconName} size={size} color={iconColor} />
{count !== undefined && (
<Text style={[styles.count, { fontSize: size * 0.7 }]}>{count}</Text>
)}
@ -70,9 +69,6 @@ const styles = StyleSheet.create({
alignItems: 'center',
gap: 4,
},
icon: {
lineHeight: (size: number) => size,
},
count: {
color: '#8E8E93',
fontWeight: '600',