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';
|
||||
@@ -4,7 +4,7 @@
|
||||
* 支持列表和多列网格模式（响应式布局）
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
||||
import React, { useState, useEffect, useLayoutEffect, useCallback, useMemo, useRef } from 'react';
|
||||
import {
|
||||
View,
|
||||
FlatList,
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
StatusBar,
|
||||
TouchableOpacity,
|
||||
NativeSyntheticEvent,
|
||||
NativeScrollEvent,
|
||||
Alert,
|
||||
Clipboard,
|
||||
Modal,
|
||||
@@ -92,6 +93,24 @@ export const HomeScreen: React.FC = () => {
|
||||
|
||||
const isLoadingMoreRef = useRef(false);
|
||||
|
||||
/** 横向胶囊条滚动位置：切换频道刷新列表时不重置 */
|
||||
const capsuleHScrollRef = useRef<ScrollView | null>(null);
|
||||
const capsuleScrollXRef = useRef(0);
|
||||
|
||||
const restoreCapsuleStripScroll = useCallback(() => {
|
||||
const x = capsuleScrollXRef.current;
|
||||
if (x <= 0) return;
|
||||
const scroll = () => capsuleHScrollRef.current?.scrollTo({ x, animated: false });
|
||||
scroll();
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(scroll);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const onCapsuleHorizontalScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
|
||||
capsuleScrollXRef.current = e.nativeEvent.contentOffset.x;
|
||||
}, []);
|
||||
|
||||
// 构建一个以 postId 为 key 的 map，用于快速查找
|
||||
const postsMap = useMemo(() => {
|
||||
const map = new Map<string, Post>();
|
||||
@@ -114,6 +133,11 @@ export const HomeScreen: React.FC = () => {
|
||||
const isLatestTab = activeIndex === 1;
|
||||
const currentChannelId = isLatestTab && activeCapsuleId ? activeCapsuleId : undefined;
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!isLatestTab) return;
|
||||
restoreCapsuleStripScroll();
|
||||
}, [isLatestTab, activeCapsuleId, latestCapsules.length, restoreCapsuleStripScroll]);
|
||||
|
||||
// 使用差异更新 Hook 获取帖子列表
|
||||
const listKey = useMemo(
|
||||
() => `home_${getPostType()}_${currentChannelId || 'all'}`,
|
||||
@@ -453,7 +477,15 @@ export const HomeScreen: React.FC = () => {
|
||||
|
||||
return (
|
||||
<View style={[styles.capsuleWrapper, { paddingHorizontal: responsivePadding }]}>
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.capsuleList}>
|
||||
<ScrollView
|
||||
ref={capsuleHScrollRef}
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.capsuleList}
|
||||
onScroll={onCapsuleHorizontalScroll}
|
||||
scrollEventThrottle={16}
|
||||
onContentSizeChange={restoreCapsuleStripScroll}
|
||||
>
|
||||
{latestCapsules.map((item) => {
|
||||
const isActive = item.id === activeCapsuleId;
|
||||
return (
|
||||
|
||||
@@ -2054,30 +2054,23 @@ const styles = StyleSheet.create({
|
||||
paddingVertical: spacing.xs,
|
||||
borderRadius: borderRadius.md,
|
||||
},
|
||||
// 空评论状态样式
|
||||
// 空评论状态样式（与平铺评论区一致，无卡片气泡）
|
||||
emptyCommentsContainer: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginHorizontal: spacing.lg,
|
||||
marginTop: spacing.lg,
|
||||
marginBottom: spacing.md,
|
||||
paddingVertical: spacing.xl + spacing.md,
|
||||
paddingHorizontal: spacing.lg,
|
||||
borderRadius: borderRadius.lg,
|
||||
backgroundColor: colors.background.paper,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: colors.divider,
|
||||
marginHorizontal: spacing.md,
|
||||
marginTop: spacing.md,
|
||||
marginBottom: spacing.lg,
|
||||
paddingVertical: spacing.xl,
|
||||
paddingHorizontal: spacing.md,
|
||||
},
|
||||
emptyCommentsIconWrapper: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
backgroundColor: colors.background.default,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: colors.divider,
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: spacing.sm,
|
||||
opacity: 0.85,
|
||||
},
|
||||
emptyCommentsTitle: {
|
||||
fontSize: fontSizes.md,
|
||||
|
||||
@@ -379,6 +379,16 @@ export const ScheduleScreen: React.FC = () => {
|
||||
// 渲染周选择器
|
||||
const renderWeekSelector = () => (
|
||||
<View style={styles.weekSelector}>
|
||||
{router.canGoBack() ? (
|
||||
<TouchableOpacity
|
||||
style={styles.weekBarIconButton}
|
||||
onPress={() => router.back()}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="返回"
|
||||
>
|
||||
<MaterialCommunityIcons name="chevron-left" size={28} color="#FFFFFF" />
|
||||
</TouchableOpacity>
|
||||
) : null}
|
||||
<TouchableOpacity
|
||||
style={styles.settingsButton}
|
||||
onPress={() => setIsSettingsModalVisible(true)}
|
||||
@@ -1066,6 +1076,13 @@ const styles = StyleSheet.create({
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
weekBarIconButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginLeft: spacing.sm,
|
||||
},
|
||||
settingsButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
|
||||
Reference in New Issue
Block a user