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
2026-03-25 01:29:41 +08:00
parent c12b98e293
commit cedb8284ba
16 changed files with 463 additions and 86 deletions

View File

@@ -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 (