expo-popcore-app/app/searchResults.tsx

119 lines
3.3 KiB
TypeScript

import { useState } from 'react'
import {
View,
StyleSheet,
StatusBar as RNStatusBar,
} from 'react-native'
import { StatusBar } from 'expo-status-bar'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useRouter, useLocalSearchParams } from 'expo-router'
import SearchResultsGrid from '@/components/SearchResultsGrid'
import SearchBar from '@/components/SearchBar'
// 搜索结果数据
const searchResults = [
{
id: 1,
title: '猫咪圣诞写真',
image: require('@/assets/images/android-icon-background.png'),
height: 236,
},
{
id: 2,
title: '猫咪圣诞写真',
image: require('@/assets/images/android-icon-background.png'),
height: 131,
},
{
id: 3,
title: '猫咪圣诞写真',
image: require('@/assets/images/android-icon-background.png'),
height: 236,
},
{
id: 4,
title: '猫咪圣诞写真',
image: require('@/assets/images/android-icon-background.png'),
height: 236,
},
{
id: 5,
title: '猫咪圣诞写真',
image: require('@/assets/images/android-icon-background.png'),
height: 95,
},
{
id: 6,
title: '猫咪圣诞写真',
image: require('@/assets/images/android-icon-background.png'),
height: 236,
},
{
id: 7,
title: '猫咪圣诞写真',
image: require('@/assets/images/android-icon-background.png'),
height: 228,
},
{
id: 8,
title: '猫咪圣诞写真',
image: require('@/assets/images/android-icon-background.png'),
height: 95,
},
{
id: 9,
title: '猫咪圣诞写真',
image: require('@/assets/images/android-icon-background.png'),
height: 228,
},
]
export default function SearchResultsScreen() {
const router = useRouter()
const params = useLocalSearchParams()
const [searchText, setSearchText] = useState((params.q as string) || '')
return (
<SafeAreaView style={styles.container} edges={['top']}>
<StatusBar style="light" />
<RNStatusBar barStyle="light-content" />
{/* Top Bar with Search */}
<SearchBar
searchText={searchText}
onSearchTextChange={setSearchText}
onSearch={(text) => {
// 搜索结果页面的搜索按钮可以保持当前页面或执行搜索
}}
onBack={() => router.back()}
readOnly={true}
onInputPress={() => {
router.push({
pathname: '/searchTemplate',
params: { q: searchText, focus: 'true' },
})
}}
onClearPress={() => {
router.push({
pathname: '/searchTemplate',
params: { q: '', focus: 'true' },
})
}}
marginBottom={12}
/>
{/* 搜索结果网格 */}
<SearchResultsGrid results={searchResults} />
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#090A0B',
},
})