feat(Notification): implement notification preferences management and enhance notification handling
- Introduced a new service for managing notification preferences, including push notifications, sound, and vibration settings. - Updated the notification handling logic to respect user preferences, ensuring notifications are displayed according to user settings. - Refactored the App and various screens to integrate the new notification preferences, improving user experience and consistency. - Enhanced the HomeScreen and NotificationSettingsScreen to load and update notification settings seamlessly. - Implemented a mechanism to hide the bottom tab bar based on scroll events, improving navigation usability.
This commit is contained in:
lafay
@@ -21,12 +21,12 @@ import {
|
||||
Modal,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useRouter, useFocusEffect } from 'expo-router';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
||||
import { colors, spacing, borderRadius, shadows } from '../../theme';
|
||||
import { Post } from '../../types';
|
||||
import { useUserStore } from '../../stores';
|
||||
import { useUserStore, useHomeTabBarVisibilityStore } from '../../stores';
|
||||
import { useCurrentUser } from '../../stores/authStore';
|
||||
import { channelService, postService } from '../../services';
|
||||
import { PostCard, TabBar, SearchBar } from '../../components/business';
|
||||
@@ -47,6 +47,10 @@ const SWIPE_COOLDOWN_MS = 300;
|
||||
const MOBILE_TAB_BAR_HEIGHT = 64;
|
||||
const MOBILE_TAB_FLOATING_MARGIN = 12;
|
||||
const MOBILE_FAB_GAP = 12;
|
||||
/** 首页纵向滑动超过此阈值视为明确向下/向上划，用于隐藏或显示底部 Tab */
|
||||
const TAB_BAR_SCROLL_DELTA_Y = 10;
|
||||
/** 停止滑动多久后自动恢复底部 Tab */
|
||||
const TAB_BAR_IDLE_RESTORE_MS = 2200;
|
||||
|
||||
type ViewMode = 'list' | 'grid';
|
||||
type PostType = 'follow' | 'hot' | 'latest';
|
||||
@@ -93,6 +97,65 @@ export const HomeScreen: React.FC = () => {
|
||||
|
||||
const isLoadingMoreRef = useRef(false);
|
||||
|
||||
const setBottomTabBarHiddenByScroll = useHomeTabBarVisibilityStore((s) => s.setBottomTabBarHiddenByScroll);
|
||||
const bottomTabBarHiddenByScroll = useHomeTabBarVisibilityStore((s) => s.bottomTabBarHiddenByScroll);
|
||||
const homeListScrollYRef = useRef(0);
|
||||
const tabBarIdleRestoreTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const clearTabBarIdleRestoreTimer = useCallback(() => {
|
||||
if (tabBarIdleRestoreTimerRef.current != null) {
|
||||
clearTimeout(tabBarIdleRestoreTimerRef.current);
|
||||
tabBarIdleRestoreTimerRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const scheduleTabBarIdleRestore = useCallback(() => {
|
||||
clearTabBarIdleRestoreTimer();
|
||||
tabBarIdleRestoreTimerRef.current = setTimeout(() => {
|
||||
setBottomTabBarHiddenByScroll(false);
|
||||
tabBarIdleRestoreTimerRef.current = null;
|
||||
}, TAB_BAR_IDLE_RESTORE_MS);
|
||||
}, [clearTabBarIdleRestoreTimer, setBottomTabBarHiddenByScroll]);
|
||||
|
||||
const handleHomeVerticalScroll = useCallback(
|
||||
(event: NativeSyntheticEvent<NativeScrollEvent>) => {
|
||||
const y = event.nativeEvent.contentOffset.y;
|
||||
const dy = y - homeListScrollYRef.current;
|
||||
homeListScrollYRef.current = y;
|
||||
|
||||
scheduleTabBarIdleRestore();
|
||||
|
||||
if (y <= 0) {
|
||||
setBottomTabBarHiddenByScroll(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (dy > TAB_BAR_SCROLL_DELTA_Y) {
|
||||
setBottomTabBarHiddenByScroll(true);
|
||||
} else if (dy < -TAB_BAR_SCROLL_DELTA_Y) {
|
||||
setBottomTabBarHiddenByScroll(false);
|
||||
}
|
||||
},
|
||||
[scheduleTabBarIdleRestore, setBottomTabBarHiddenByScroll]
|
||||
);
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
return () => {
|
||||
clearTabBarIdleRestoreTimer();
|
||||
homeListScrollYRef.current = 0;
|
||||
setBottomTabBarHiddenByScroll(false);
|
||||
};
|
||||
}, [clearTabBarIdleRestoreTimer, setBottomTabBarHiddenByScroll])
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (showSearch) {
|
||||
clearTabBarIdleRestoreTimer();
|
||||
setBottomTabBarHiddenByScroll(false);
|
||||
}
|
||||
}, [showSearch, clearTabBarIdleRestoreTimer, setBottomTabBarHiddenByScroll]);
|
||||
|
||||
/** 横向胶囊条滚动位置：切换频道刷新列表时不重置 */
|
||||
const capsuleHScrollRef = useRef<ScrollView | null>(null);
|
||||
const capsuleScrollXRef = useRef(0);
|
||||
@@ -133,6 +196,11 @@ export const HomeScreen: React.FC = () => {
|
||||
const isLatestTab = activeIndex === 1;
|
||||
const currentChannelId = isLatestTab && activeCapsuleId ? activeCapsuleId : undefined;
|
||||
|
||||
useEffect(() => {
|
||||
homeListScrollYRef.current = 0;
|
||||
setBottomTabBarHiddenByScroll(false);
|
||||
}, [activeIndex, currentChannelId, viewMode, setBottomTabBarHiddenByScroll]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!isLatestTab) return;
|
||||
restoreCapsuleStripScroll();
|
||||
@@ -183,18 +251,21 @@ export const HomeScreen: React.FC = () => {
|
||||
}
|
||||
}, [posts.length, listKey, hasMore, isLoadingMore]);
|
||||
|
||||
// 网格模式滚动处理 - 检测是否滚动到底部
|
||||
const handleGridScroll = useCallback((event: any) => {
|
||||
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
|
||||
const scrollY = contentOffset.y;
|
||||
const visibleHeight = layoutMeasurement.height;
|
||||
const contentHeight = contentSize.height;
|
||||
|
||||
// 当滚动到距离底部 200px 时触发加载更多
|
||||
if (scrollY + visibleHeight >= contentHeight - 200) {
|
||||
loadMore();
|
||||
}
|
||||
}, [loadMore]);
|
||||
// 网格模式滚动处理 - 检测是否滚动到底部 + 底部 Tab 显隐
|
||||
const handleGridScroll = useCallback(
|
||||
(event: NativeSyntheticEvent<NativeScrollEvent>) => {
|
||||
handleHomeVerticalScroll(event);
|
||||
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
|
||||
const scrollY = contentOffset.y;
|
||||
const visibleHeight = layoutMeasurement.height;
|
||||
const contentHeight = contentSize.height;
|
||||
|
||||
if (scrollY + visibleHeight >= contentHeight - 200) {
|
||||
loadMore();
|
||||
}
|
||||
},
|
||||
[handleHomeVerticalScroll, loadMore]
|
||||
);
|
||||
|
||||
// 刷新方法 - 先获取正确类型的帖子，再刷新
|
||||
const refresh = useCallback(async () => {
|
||||
@@ -227,10 +298,13 @@ export const HomeScreen: React.FC = () => {
|
||||
return posts.map(post => {
|
||||
const storePost = postsMap.get(post.id);
|
||||
if (storePost) {
|
||||
// 如果 store 中有这个帖子，使用 store 的最新状态
|
||||
return storePost;
|
||||
// store 同步点赞等状态；channel 等列表专用字段在 store 里常缺失，从列表帖合并
|
||||
return {
|
||||
...post,
|
||||
...storePost,
|
||||
channel: storePost.channel ?? post.channel,
|
||||
};
|
||||
}
|
||||
// 如果 store 中没有这个帖子，使用原始数据
|
||||
return post;
|
||||
});
|
||||
}, [posts, postsMap]);
|
||||
@@ -281,10 +355,12 @@ export const HomeScreen: React.FC = () => {
|
||||
if (!isMobile) {
|
||||
return undefined;
|
||||
}
|
||||
if (bottomTabBarHiddenByScroll) {
|
||||
return MOBILE_TAB_FLOATING_MARGIN + MOBILE_FAB_GAP + insets.bottom;
|
||||
}
|
||||
// TabBar 悬浮在底部，发帖按钮需要在 TabBar 上方
|
||||
// TabBar 高度 64 + TabBar 浮动间距 12 + 按钮与 TabBar 间距 16
|
||||
return MOBILE_TAB_BAR_HEIGHT + MOBILE_TAB_FLOATING_MARGIN * 2 + MOBILE_FAB_GAP + insets.bottom;
|
||||
}, [isMobile, insets.bottom]);
|
||||
}, [isMobile, insets.bottom, bottomTabBarHiddenByScroll]);
|
||||
|
||||
// 切换视图模式
|
||||
const toggleViewMode = () => {
|
||||
@@ -639,7 +715,7 @@ export const HomeScreen: React.FC = () => {
|
||||
}
|
||||
]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
scrollEventThrottle={100}
|
||||
scrollEventThrottle={16}
|
||||
onScroll={handleGridScroll}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
@@ -734,6 +810,7 @@ export const HomeScreen: React.FC = () => {
|
||||
}
|
||||
onEndReached={loadMore}
|
||||
onEndReachedThreshold={0.3}
|
||||
onScroll={handleHomeVerticalScroll}
|
||||
scrollEventThrottle={16}
|
||||
ListEmptyComponent={renderEmpty}
|
||||
ListFooterComponent={isLoadingMore ? <Loading size="sm" /> : null}
|
||||
@@ -783,6 +860,7 @@ export const HomeScreen: React.FC = () => {
|
||||
activeIndex={activeIndex}
|
||||
onTabChange={changeTab}
|
||||
variant="modern"
|
||||
style={styles.homeTabBar}
|
||||
rightContent={
|
||||
<TouchableOpacity onPress={toggleViewMode} style={styles.viewToggleBtn}>
|
||||
<MaterialCommunityIcons
|
||||
@@ -874,7 +952,8 @@ const styles = StyleSheet.create({
|
||||
backgroundColor: colors.background.paper,
|
||||
},
|
||||
searchWrapper: {
|
||||
paddingBottom: spacing.sm,
|
||||
paddingTop: spacing.lg,
|
||||
paddingBottom: spacing.xs,
|
||||
// 移除阴影效果
|
||||
shadowColor: 'transparent',
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
@@ -882,6 +961,10 @@ const styles = StyleSheet.create({
|
||||
shadowRadius: 0,
|
||||
elevation: 0,
|
||||
},
|
||||
homeTabBar: {
|
||||
marginTop: 0,
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
viewToggleBtn: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
|
||||
Reference in New Issue
Block a user