lan
4213d13b8f
Refactor the navigation and header strategy by replacing native stack headers with a custom `SimpleHeader` component across most profile and detail screens. This provides a more consistent UI/UX and better control over layout behavior. - Implement `SimpleHeader` component in `src/components/common`. - Disable native header rendering in `app/(app)/(tabs)/profile/_layout.tsx` and `app/_layout.tsx`. - Update profile sub-screens to use `SimpleHeader` and `StatusBar` from `expo-status-bar`. - Refactor `PostDetailScreen` to use a custom header implementation for better integration with the post author information. - Update `UserScreen` to wrap content in `SafeAreaView` with the new header. - Adjust `AppBackButton` to support transparent backgrounds.
58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { TouchableOpacity, StyleProp, ViewStyle, StyleSheet } from 'react-native';
|
|
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
|
|
|
import { useAppColors } from '../../theme';
|
|
|
|
type AppBackButtonIcon = 'chevron-left' | 'arrow-left' | 'close';
|
|
|
|
interface AppBackButtonProps {
|
|
onPress: () => void;
|
|
icon?: AppBackButtonIcon;
|
|
style?: StyleProp<ViewStyle>;
|
|
iconColor?: string;
|
|
hitSlop?: number;
|
|
testID?: string;
|
|
}
|
|
|
|
const AppBackButton: React.FC<AppBackButtonProps> = ({
|
|
onPress,
|
|
icon = 'chevron-left',
|
|
style,
|
|
iconColor: iconColorProp,
|
|
hitSlop = 8,
|
|
testID,
|
|
}) => {
|
|
const colors = useAppColors();
|
|
const iconColor = iconColorProp ?? colors.text.primary;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
style={[styles.button, style]}
|
|
activeOpacity={0.6}
|
|
hitSlop={hitSlop}
|
|
testID={testID}
|
|
accessibilityRole="button"
|
|
accessibilityLabel={icon === 'close' ? '关闭' : '返回'}
|
|
>
|
|
<MaterialCommunityIcons name={icon} size={36} color={iconColor} />
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
width: 40,
|
|
height: 40,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginLeft: -12,
|
|
marginRight: 0,
|
|
padding: 0,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
});
|
|
|
|
export default AppBackButton;
|