849447c5da
- 新增 ROUTES 常量文件，集中管理应用路由 - 更新多个页面的导航逻辑，使用 ROUTES 常量替代硬编码路径 - 修改教练页面和今日训练页面的路由，提升代码可维护性 - 优化标签页和登录页面的导航，确保一致性和易用性
75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
import dayjs from 'dayjs';
|
|
import { useRouter } from 'expo-router';
|
|
import React from 'react';
|
|
import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { ROUTES } from '@/constants/Routes';
|
|
|
|
type Props = {
|
|
id: string;
|
|
title: string;
|
|
coverImage: string;
|
|
publishedAt: string; // ISO
|
|
readCount: number;
|
|
};
|
|
|
|
export function ArticleCard({ id, title, coverImage, publishedAt, readCount }: Props) {
|
|
const router = useRouter();
|
|
return (
|
|
<Pressable onPress={() => router.push(`${ROUTES.ARTICLE}/${id}`)} style={styles.card}>
|
|
<Image source={{ uri: coverImage }} style={styles.cover} />
|
|
<View style={styles.meta}>
|
|
<Text style={styles.title} numberOfLines={2}>{title}</Text>
|
|
<View style={styles.row}>
|
|
<Text style={styles.metaText}>{dayjs(publishedAt).format('YYYY-MM-DD')}</Text>
|
|
<Text style={[styles.metaText, styles.dot]}>·</Text>
|
|
<Text style={styles.metaText}>{readCount} 阅读</Text>
|
|
</View>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
flexDirection: 'row',
|
|
backgroundColor: '#FFFFFF',
|
|
borderRadius: 20,
|
|
padding: 14,
|
|
marginBottom: 14,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 10,
|
|
elevation: 2,
|
|
},
|
|
cover: {
|
|
width: 92,
|
|
height: 92,
|
|
borderRadius: 16,
|
|
},
|
|
meta: {
|
|
flex: 1,
|
|
paddingLeft: 12,
|
|
justifyContent: 'center',
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
color: '#192126',
|
|
fontWeight: '800',
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginTop: 8,
|
|
},
|
|
metaText: {
|
|
fontSize: 12,
|
|
color: '#8A8A8E',
|
|
},
|
|
dot: {
|
|
paddingHorizontal: 6,
|
|
},
|
|
});
|
|
|
|
|