feat(Apps): introduce Apps tab and related screens for enhanced navigation
- Added a new "Apps" tab in the TabsLayout, providing users with access to various applications. - Created AppsScreen to display app entries, including a schedule feature with a calendar icon. - Implemented routing for the schedule and course screens under the new Apps tab structure. - Updated navigation hrefs to reflect the new Apps section, improving overall user experience. - Refactored HomeScreen to manage bottom tab visibility based on scroll events, enhancing usability.
This commit is contained in:
lafay
248
src/screens/apps/AppsScreen.tsx
Normal file
248
src/screens/apps/AppsScreen.tsx
Normal file
@@ -0,0 +1,248 @@
|
||||
/**
|
||||
* 应用中心：聚合站内轻应用入口
|
||||
*/
|
||||
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import { View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
|
||||
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
|
||||
import { colors, spacing, fontSizes, borderRadius, shadows } from '../../theme';
|
||||
import * as hrefs from '../../navigation/hrefs';
|
||||
import { Text, ResponsiveContainer } from '../../components/common';
|
||||
import { useResponsive } from '../../hooks/useResponsive';
|
||||
type AppItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
icon: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
|
||||
gradient: readonly [string, string, ...string[]];
|
||||
href: string;
|
||||
};
|
||||
|
||||
const APP_ENTRIES: AppItem[] = [
|
||||
{
|
||||
id: 'schedule',
|
||||
title: '课表',
|
||||
subtitle: '周视图 · 教务同步',
|
||||
icon: 'calendar-week',
|
||||
gradient: [colors.primary.main, colors.primary.light],
|
||||
href: hrefs.hrefSchedule(),
|
||||
},
|
||||
];
|
||||
|
||||
export const AppsScreen: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { isMobile, isTablet, width } = useResponsive();
|
||||
|
||||
const columns = useMemo(() => {
|
||||
if (width >= 900) return 4;
|
||||
if (isTablet || width >= 600) return 3;
|
||||
return 2;
|
||||
}, [isTablet, width]);
|
||||
|
||||
const gap = spacing.md;
|
||||
const [gridWidth, setGridWidth] = useState(0);
|
||||
const cardWidth =
|
||||
gridWidth > 0 ? (gridWidth - gap * (columns - 1)) / columns : undefined;
|
||||
|
||||
const scrollBottomInset = isMobile ? 88 + insets.bottom + spacing.md : spacing['3xl'];
|
||||
|
||||
const onOpenApp = useCallback(
|
||||
(href: string) => {
|
||||
router.push(href);
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.safe} edges={['top']}>
|
||||
<StatusBar style="dark" />
|
||||
<ScrollView
|
||||
style={styles.scroll}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<ResponsiveContainer maxWidth={960}>
|
||||
<LinearGradient
|
||||
colors={[`${colors.primary.main}18`, `${colors.primary.light}10`, 'transparent']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.hero}
|
||||
>
|
||||
<View style={styles.heroIconWrap}>
|
||||
<LinearGradient
|
||||
colors={[colors.primary.main, colors.primary.light]}
|
||||
style={styles.heroIconGradient}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
>
|
||||
<MaterialCommunityIcons name="apps" size={28} color={colors.primary.contrast} />
|
||||
</LinearGradient>
|
||||
</View>
|
||||
<Text style={styles.heroTitle}>应用</Text>
|
||||
<Text style={styles.heroSubtitle}>学习与生活常用工具，持续扩充中</Text>
|
||||
</LinearGradient>
|
||||
|
||||
<Text style={styles.sectionLabel}>全部应用</Text>
|
||||
<View
|
||||
style={[styles.grid, { gap }]}
|
||||
onLayout={e => setGridWidth(e.nativeEvent.layout.width)}
|
||||
>
|
||||
{APP_ENTRIES.map(item => (
|
||||
<TouchableOpacity
|
||||
key={item.id}
|
||||
style={[styles.card, cardWidth != null ? { width: cardWidth } : styles.cardFlex, shadows.md]}
|
||||
onPress={() => onOpenApp(item.href)}
|
||||
activeOpacity={0.88}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={item.gradient}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.cardIconRing}
|
||||
>
|
||||
<View style={styles.cardIconInner}>
|
||||
<MaterialCommunityIcons name={item.icon} size={26} color={colors.primary.main} />
|
||||
</View>
|
||||
</LinearGradient>
|
||||
<Text style={styles.cardTitle} numberOfLines={1}>
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text style={styles.cardSubtitle} numberOfLines={2}>
|
||||
{item.subtitle}
|
||||
</Text>
|
||||
<View style={styles.cardFooter}>
|
||||
<Text style={styles.cardAction}>打开</Text>
|
||||
<MaterialCommunityIcons name="chevron-right" size={18} color={colors.primary.main} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<Text style={styles.hint}>更多应用敬请期待</Text>
|
||||
</ResponsiveContainer>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppsScreen;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safe: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background.default,
|
||||
},
|
||||
scroll: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingTop: spacing.md,
|
||||
paddingHorizontal: spacing.lg,
|
||||
},
|
||||
hero: {
|
||||
borderRadius: borderRadius['2xl'],
|
||||
paddingVertical: spacing['2xl'],
|
||||
paddingHorizontal: spacing.xl,
|
||||
marginBottom: spacing['2xl'],
|
||||
overflow: 'hidden',
|
||||
},
|
||||
heroIconWrap: {
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
heroIconGradient: {
|
||||
width: 52,
|
||||
height: 52,
|
||||
borderRadius: borderRadius.xl,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
...shadows.md,
|
||||
},
|
||||
heroTitle: {
|
||||
fontSize: fontSizes['3xl'],
|
||||
fontWeight: '800',
|
||||
color: colors.text.primary,
|
||||
letterSpacing: -0.5,
|
||||
},
|
||||
heroSubtitle: {
|
||||
marginTop: spacing.xs,
|
||||
fontSize: fontSizes.sm,
|
||||
color: colors.text.secondary,
|
||||
lineHeight: 20,
|
||||
maxWidth: 320,
|
||||
},
|
||||
sectionLabel: {
|
||||
fontSize: fontSizes.xs,
|
||||
fontWeight: '700',
|
||||
color: colors.text.secondary,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1.2,
|
||||
marginBottom: spacing.md,
|
||||
marginLeft: 2,
|
||||
},
|
||||
grid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
width: '100%',
|
||||
},
|
||||
cardFlex: {
|
||||
flex: 1,
|
||||
minWidth: 140,
|
||||
maxWidth: '100%',
|
||||
},
|
||||
card: {
|
||||
backgroundColor: colors.background.paper,
|
||||
borderRadius: borderRadius.xl,
|
||||
padding: spacing.lg,
|
||||
borderWidth: 1,
|
||||
borderColor: `${colors.divider}99`,
|
||||
},
|
||||
cardIconRing: {
|
||||
width: 52,
|
||||
height: 52,
|
||||
borderRadius: borderRadius.lg,
|
||||
padding: 2,
|
||||
marginBottom: spacing.md,
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
cardIconInner: {
|
||||
flex: 1,
|
||||
borderRadius: borderRadius.md,
|
||||
backgroundColor: colors.background.paper,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: fontSizes.lg,
|
||||
fontWeight: '700',
|
||||
color: colors.text.primary,
|
||||
},
|
||||
cardSubtitle: {
|
||||
marginTop: spacing.xs,
|
||||
fontSize: fontSizes.sm,
|
||||
color: colors.text.secondary,
|
||||
lineHeight: 18,
|
||||
minHeight: 36,
|
||||
},
|
||||
cardFooter: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: spacing.md,
|
||||
},
|
||||
cardAction: {
|
||||
fontSize: fontSizes.sm,
|
||||
fontWeight: '600',
|
||||
color: colors.primary.main,
|
||||
},
|
||||
hint: {
|
||||
marginTop: spacing['3xl'],
|
||||
textAlign: 'center',
|
||||
fontSize: fontSizes.sm,
|
||||
color: colors.text.hint,
|
||||
},
|
||||
});
|
||||
2
src/screens/apps/index.ts
Normal file
2
src/screens/apps/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { AppsScreen } from './AppsScreen';
|
||||
export { default } from './AppsScreen';
|
||||
Reference in New Issue
Block a user