You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
2.2 KiB
52 lines
2.2 KiB
import type { ReactNode } from 'react';
|
|
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { colors } from '../../../src/theme';
|
|
|
|
interface Props {
|
|
title?: string;
|
|
showBack?: boolean;
|
|
onBack?: () => void;
|
|
/** 返回图标：默认 chevron-back，可传 close（对齐验证码页的 × 关闭） */
|
|
backIcon?: 'chevron-back' | 'close';
|
|
children: ReactNode;
|
|
footer?: ReactNode;
|
|
scroll?: boolean;
|
|
}
|
|
|
|
/** 每屏统一外壳：系统状态栏 + 可选返回箭头 + 标题 + 滚动内容 + 底部固定区 */
|
|
export function ScreenShell({ title, showBack, onBack, backIcon = 'chevron-back', children, footer, scroll = true }: Props) {
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top', 'bottom']}>
|
|
<StatusBar style="dark" />
|
|
{showBack ? (
|
|
<Pressable style={styles.backRow} onPress={onBack} hitSlop={10}>
|
|
<Ionicons name={backIcon} size={backIcon === 'close' ? 26 : 24} color={colors.textPrimary} />
|
|
{title ? <Text style={styles.titleInline}>{title}</Text> : null}
|
|
</Pressable>
|
|
) : title ? (
|
|
<Text style={styles.titleCenter}>{title}</Text>
|
|
) : null}
|
|
{scroll ? (
|
|
<ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
|
|
{children}
|
|
</ScrollView>
|
|
) : (
|
|
<View style={styles.scrollContent}>{children}</View>
|
|
)}
|
|
{footer ? <View style={styles.footer}>{footer}</View> : null}
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: colors.pageBg },
|
|
backRow: { flexDirection: 'row', alignItems: 'center', gap: 2, paddingHorizontal: 16, paddingVertical: 10 },
|
|
titleInline: { fontSize: 17, fontWeight: '700', color: colors.textPrimary },
|
|
titleCenter: { fontSize: 18, fontWeight: '800', color: colors.textPrimary, textAlign: 'center', paddingVertical: 12 },
|
|
scroll: { flex: 1 },
|
|
scrollContent: { flexGrow: 1, padding: 8, paddingBottom: 28 },
|
|
footer: { padding: 16, paddingBottom: 22, backgroundColor: colors.pageBg },
|
|
});
|
|
|