122 lines
3.1 KiB
TypeScript
122 lines
3.1 KiB
TypeScript
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Pressable,
|
|
StatusBar as RNStatusBar,
|
|
} from 'react-native'
|
|
import { StatusBar } from 'expo-status-bar'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { useRouter } from 'expo-router'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { LeftArrowIcon } from '@/components/icon'
|
|
import SearchResultsGrid from '@/components/SearchResultsGrid'
|
|
|
|
// 模板详情数据 - 根据实际需求可以改为从 API 获取
|
|
const templateDetailData = [
|
|
{
|
|
id: 1,
|
|
title: '猫咪圣诞写真',
|
|
image: require('@/assets/images/android-icon-background.png'),
|
|
height: 214,
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '猫咪圣诞写真',
|
|
image: require('@/assets/images/android-icon-background.png'),
|
|
height: 236,
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '猫咪圣诞写真',
|
|
image: require('@/assets/images/favicon.png'),
|
|
height: 214,
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '猫咪圣诞写真',
|
|
image: require('@/assets/images/icon.png'),
|
|
height: 200,
|
|
},
|
|
{
|
|
id: 5,
|
|
title: '猫咪圣诞写真',
|
|
image: require('@/assets/images/android-icon-background.png'),
|
|
height: 220,
|
|
},
|
|
{
|
|
id: 6,
|
|
title: '猫咪圣诞写真',
|
|
image: require('@/assets/images/android-icon-background.png'),
|
|
height: 214,
|
|
},
|
|
]
|
|
|
|
export default function TemplateDetailScreen() {
|
|
const { t } = useTranslation()
|
|
const router = useRouter()
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top']}>
|
|
<StatusBar style="light" />
|
|
<RNStatusBar barStyle="light-content" />
|
|
|
|
{/* 顶部导航栏 */}
|
|
<View style={styles.header}>
|
|
<Pressable
|
|
onPress={() => router.back()}
|
|
style={styles.backButton}
|
|
>
|
|
<LeftArrowIcon />
|
|
</Pressable>
|
|
</View>
|
|
|
|
{/* 标题区域 */}
|
|
<View style={styles.titleSection}>
|
|
<Text style={styles.mainTitle}>
|
|
{t('templateDetail.title')}
|
|
</Text>
|
|
<Text style={styles.subTitle}>
|
|
{t('templateDetail.subtitle')}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* 图片网格 */}
|
|
<SearchResultsGrid results={templateDetailData} />
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#090A0B',
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingTop: 12,
|
|
paddingHorizontal: 12,
|
|
paddingBottom: 24,
|
|
},
|
|
backButton: {
|
|
padding: 4,
|
|
},
|
|
titleSection: {
|
|
paddingHorizontal: 12,
|
|
paddingBottom: 24,
|
|
},
|
|
mainTitle: {
|
|
color: '#F5F5F5',
|
|
fontSize: 20,
|
|
fontWeight: '500',
|
|
marginBottom: 4,
|
|
},
|
|
subTitle: {
|
|
color: '#ABABAB',
|
|
fontSize: 14,
|
|
fontWeight: '400',
|
|
},
|
|
})
|
|
|