105 lines
2.3 KiB
TypeScript
105 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
|
|
import { ArrowLeft } from 'lucide-react';
|
|
import { router } from 'expo-router';
|
|
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;
|
|
}
|
|
router.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;
|