b9399bf4cf
- 重构首页：从模板列表展示改为AI功能展示界面 - 更新底部导航：将explore改为content，index改为home - 新增多个页面：积分、兑换、历史记录、结果展示、设置等 - 优化UI组件：新增通用按钮、分类标签、加载状态等组件 - 清理冗余文件：删除旧的认证文档和积分详情页面 - 更新主题配置：调整配色方案和视觉风格 - 修复导入路径：优化组件导入结构 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
106 lines
2.3 KiB
TypeScript
106 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
|
|
import { ArrowLeft } from 'lucide-react';
|
|
import { Colors, Spacing, FontSize, Layout } from '@/constants/theme';
|
|
|
|
interface CommonHeaderProps {
|
|
title: string;
|
|
showBack?: boolean;
|
|
onBack?: () => void;
|
|
rightContent?: React.ReactNode;
|
|
backgroundColor?: string;
|
|
}
|
|
|
|
export const CommonHeader: React.FC<CommonHeaderProps> = ({
|
|
title,
|
|
showBack = true,
|
|
onBack,
|
|
rightContent,
|
|
backgroundColor = '#FFFFFF',
|
|
}) => {
|
|
const handleBackPress = () => {
|
|
if (onBack) {
|
|
onBack();
|
|
return;
|
|
}
|
|
if (typeof window !== 'undefined' && window.history) {
|
|
window.history.back();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor }]}>
|
|
<View style={styles.content}>
|
|
<View style={styles.leftArea}>
|
|
{showBack && (
|
|
<TouchableOpacity
|
|
onPress={handleBackPress}
|
|
style={styles.backButton}
|
|
activeOpacity={0.7}
|
|
>
|
|
<ArrowLeft size={24} color="#007AFF" strokeWidth={2.5} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.centerArea}>
|
|
<Text style={styles.title} numberOfLines={1}>
|
|
{title}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.rightArea}>
|
|
{rightContent}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
height: Layout.headerHeight,
|
|
borderBottomWidth: 0,
|
|
borderBottomColor: Colors.border,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: Spacing.md,
|
|
},
|
|
leftArea: {
|
|
width: 40,
|
|
height: '100%',
|
|
justifyContent: 'center',
|
|
},
|
|
backButton: {
|
|
width: 40,
|
|
height: 40,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
centerArea: {
|
|
flex: 1,
|
|
height: '100%',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingHorizontal: Spacing.sm,
|
|
},
|
|
title: {
|
|
fontSize: FontSize.lg,
|
|
fontWeight: '600',
|
|
color: Colors.text.primary,
|
|
textAlign: 'center',
|
|
},
|
|
rightArea: {
|
|
width: 40,
|
|
height: '100%',
|
|
justifyContent: 'center',
|
|
alignItems: 'flex-end',
|
|
},
|
|
});
|
|
|
|
export default CommonHeader;
|