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.
53 lines
2.2 KiB
53 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;
|
|
children: ReactNode;
|
|
footer?: ReactNode;
|
|
scroll?: boolean;
|
|
/** 兼容旧调用保留，已不再渲染（统一使用系统真实状态栏） */
|
|
time?: string;
|
|
battery?: number;
|
|
}
|
|
|
|
/** 每屏统一外壳：系统状态栏 + 可选返回箭头 + 标题 + 滚动内容 + 底部固定区 */
|
|
export function ScreenShell({ title, showBack, onBack, children, footer, scroll = true, time: _time, battery: _battery }: Props) {
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top', 'bottom']}>
|
|
<StatusBar style="dark" />
|
|
{showBack ? (
|
|
<Pressable style={styles.backRow} onPress={onBack} hitSlop={10}>
|
|
<Ionicons name="chevron-back" size={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: 20, paddingBottom: 28 },
|
|
footer: { padding: 16, paddingBottom: 22, backgroundColor: colors.pageBg },
|
|
});
|
|
|