114 lines
2.5 KiB
TypeScript
114 lines
2.5 KiB
TypeScript
/**
|
||
* useUserFavorites Hook 使用示例
|
||
*
|
||
* 这个示例展示了如何使用 useUserFavorites Hook 来获取用户的收藏列表
|
||
*/
|
||
|
||
import { useEffect, useState } from 'react'
|
||
import { FlatList, View, Text } from 'react-native'
|
||
import { useUserFavorites } from '@/hooks'
|
||
|
||
// 占位组件类型声明（实际项目中应从组件库导入）
|
||
declare const LoadingSpinner: React.FC
|
||
declare const LoadingMoreSpinner: React.FC
|
||
declare const ErrorMessage: React.FC<{ message: string }>
|
||
declare const FavoriteItem: React.FC<{ favorite: unknown }>
|
||
|
||
// 示例1：基本用法
|
||
function MyFavoritesList() {
|
||
const {
|
||
favorites,
|
||
loading,
|
||
error,
|
||
execute,
|
||
refetch,
|
||
loadMore,
|
||
hasMore,
|
||
} = useUserFavorites()
|
||
|
||
useEffect(() => {
|
||
// 初始加载
|
||
execute()
|
||
}, [])
|
||
|
||
if (loading && !favorites.length) {
|
||
return <LoadingSpinner />
|
||
}
|
||
|
||
if (error) {
|
||
return <ErrorMessage message={error.message} />
|
||
}
|
||
|
||
return (
|
||
<FlatList
|
||
data={favorites}
|
||
renderItem={({ item }) => (
|
||
<FavoriteItem favorite={item} />
|
||
)}
|
||
onEndReached={() => {
|
||
if (hasMore && !loading) {
|
||
loadMore()
|
||
}
|
||
}}
|
||
onEndReachedThreshold={0.5}
|
||
ListFooterComponent={() => loading ? <LoadingMoreSpinner /> : null}
|
||
/>
|
||
)
|
||
}
|
||
|
||
// 示例2：带自定义参数
|
||
function MyFavoritesWithParams() {
|
||
const { favorites, loading } = useUserFavorites({
|
||
limit: 50, // 每页50条
|
||
})
|
||
|
||
// ...
|
||
}
|
||
|
||
// 示例3：带搜索功能
|
||
function SearchableFavorites() {
|
||
const [searchQuery, setSearchQuery] = useState('')
|
||
const { favorites, execute, loading } = useUserFavorites()
|
||
|
||
const handleSearch = (query: string) => {
|
||
setSearchQuery(query)
|
||
execute({ search: query })
|
||
}
|
||
|
||
// ...
|
||
}
|
||
|
||
// 示例4：下拉刷新
|
||
function RefreshableFavorites() {
|
||
const { favorites, loading, refetch } = useUserFavorites()
|
||
|
||
const handleRefresh = () => {
|
||
refetch()
|
||
}
|
||
|
||
return (
|
||
<FlatList
|
||
data={favorites}
|
||
refreshing={loading}
|
||
onRefresh={handleRefresh}
|
||
renderItem={({ item }) => <FavoriteItem favorite={item} />}
|
||
/>
|
||
)
|
||
}
|
||
|
||
// 示例5：使用返回的完整数据
|
||
function FavoritesWithStats() {
|
||
const { data, favorites } = useUserFavorites()
|
||
|
||
return (
|
||
<View>
|
||
<Text>Total Favorites: {data?.total || 0}</Text>
|
||
<Text>Current Page: {data?.page || 1}</Text>
|
||
<Text>Per Page: {data?.limit || 20}</Text>
|
||
{/* 列表... */}
|
||
</View>
|
||
)
|
||
}
|
||
|
||
export type { UserFavoriteItem } from '@/hooks'
|