refactor(ui): implement custom header system and unify screen layouts

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.

src/components/common/AppBackButton.tsx

@@ -50,6 +50,7 @@ const styles = StyleSheet.create({
     marginLeft: -12,
     marginRight: 0,
     padding: 0,
+    backgroundColor: 'transparent',
   },
 });
 

src/components/common/SimpleHeader.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useAppColors, spacing } from '../../theme';
+import { AppBackButton, Text } from './index';
+
+interface SimpleHeaderProps {
+  title: string;
+  onBack: () => void;
+  rightComponent?: React.ReactNode;
+}
+
+export const SimpleHeader: React.FC<SimpleHeaderProps> = ({ title, onBack, rightComponent }) => {
+  const colors = useAppColors();
+
+  return (
+    <View style={[styles.header, { backgroundColor: colors.background.paper }]}>
+      <AppBackButton onPress={onBack} style={styles.backButton} />
+      <Text style={[styles.title, { color: colors.text.primary }]} numberOfLines={1}>
+        {title}
+      </Text>
+      {rightComponent ? (
+        <View style={styles.rightContainer}>
+          {rightComponent}
+        </View>
+      ) : (
+        <View style={styles.rightPlaceholder} />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 52,
+    paddingHorizontal: spacing.xs,
+  },
+  title: {
+    flex: 1,
+    fontSize: 17,
+    fontWeight: '600',
+    marginLeft: spacing.xs,
+  },
+  rightContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rightPlaceholder: {
+    width: 40,
+  },
+  backButton: {
+    marginLeft: 0,
+  },
+});

src/components/common/index.ts

@@ -18,6 +18,7 @@ export { default as ResponsiveGrid } from './ResponsiveGrid';
 export { default as ResponsiveStack, HStack, VStack } from './ResponsiveStack';
 export { default as AdaptiveLayout, SidebarLayout } from './AdaptiveLayout';
 export { default as AppBackButton } from './AppBackButton';
+export { SimpleHeader } from './SimpleHeader';
 export { default as PagerView } from './PagerView';
 
 // 图片相关组件