264 lines
9.3 KiB
TypeScript
264 lines
9.3 KiB
TypeScript
import React, { useState, useRef } from 'react';
|
||
import {
|
||
Text,
|
||
SafeAreaView,
|
||
StyleSheet,
|
||
View,
|
||
FlatList,
|
||
TouchableOpacity,
|
||
Dimensions,
|
||
Image,
|
||
NativeSyntheticEvent,
|
||
NativeScrollEvent,
|
||
LayoutChangeEvent // 导入 LayoutChangeEvent 类型
|
||
} from "react-native";
|
||
|
||
const screenWidth = Dimensions.get('window').width;
|
||
|
||
// 分类列表
|
||
const categoryList = [
|
||
{ id: '0', title: '捕鱼', icon: '🎣' },
|
||
{ id: '1', title: '真人', icon: '👤' },
|
||
{ id: '2', title: '区块链', icon: '⛓️' },
|
||
{ id: '3', title: '棋牌', icon: '🎴' },
|
||
{ id: '4', title: '电子', icon: '🎰' },
|
||
{ id: '5', title: '体育', icon: '⚽' },
|
||
{ id: '6', title: '彩票', icon: '🎫' },
|
||
{ id: '7', title: '电竞', icon: '🎮' },
|
||
{ id: '8', title: '赛车', icon: '🏎️' },
|
||
{ id: '9', title: '街机', icon: '🕹️' },
|
||
{ id: '10', title: '桌游', icon: '🎲' },
|
||
{ id: '11', title: '其他', icon: '⭐' },
|
||
];
|
||
|
||
// 随机生成游戏数据
|
||
const generateRandomGames = (categoryId: string, baseName: string) => {
|
||
// 调整随机数，使其更容易出现空列表或少量item，以测试优化效果
|
||
// (Math.random() * 6) + 0 意味着可能产生 0 到 5 个
|
||
const count = Math.floor(Math.random() * 6);
|
||
const gameTypes = ['经典版', '豪华版', '至尊版', '竞技版', '休闲版', '大师版', '传奇版', '极速版', '黄金版', '钻石版', '王者版'];
|
||
const colors = ['4A90E2', 'E94B3C', '50C878', 'F39C12', '9B59B6', 'E74C3C'];
|
||
|
||
return Array.from({ length: count }).map((_, i) => {
|
||
const color = colors[Math.floor(Math.random() * colors.length)];
|
||
return {
|
||
id: `${categoryId}-${i}`,
|
||
name: `${baseName}${gameTypes[i % gameTypes.length]}`,
|
||
hot: Math.random() > 0.6,
|
||
image: `https://via.placeholder.com/120x80/${color}/ffffff?text=Game+${i + 1}`,
|
||
};
|
||
});
|
||
};
|
||
|
||
// 模拟数据
|
||
const mockData: Record<string, Array<{ id: string, name: string, hot: boolean, image: string }>> = {};
|
||
categoryList.forEach(cat => {
|
||
mockData[cat.id] = generateRandomGames(cat.id, cat.title);
|
||
});
|
||
|
||
export default function ActivityScreen() {
|
||
const [selectedId, setSelectedId] = useState('0');
|
||
const [isSwitching, setIsSwitching] = useState(false);
|
||
const rightListRef = useRef<FlatList>(null);
|
||
|
||
// 【新增】State，用于存储右侧列表容器的实际高度
|
||
const [rightListHeight, setRightListHeight] = useState(0);
|
||
|
||
// 支持循环切换分类
|
||
const handleCategorySwitch = (direction: 'prev' | 'next') => {
|
||
const currentIndex = categoryList.findIndex(item => item.id === selectedId);
|
||
const total = categoryList.length;
|
||
let newIndex = direction === 'next' ? (currentIndex + 1) % total : (currentIndex - 1 + total) % total;
|
||
|
||
// 切换分类
|
||
setSelectedId(categoryList[newIndex].id);
|
||
// 切换时重置滚动，避免新列表加载时停在奇怪的位置
|
||
rightListRef.current?.scrollToOffset({ offset: 0, animated: false });
|
||
};
|
||
|
||
// 实时检测滚动边界 + 循环切换
|
||
const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
|
||
const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
|
||
const y = contentOffset.y;
|
||
const layoutHeight = layoutMeasurement.height;
|
||
const contentHeight = contentSize.height;
|
||
|
||
// 如果正在切换中，则锁定，防止短时间内连续触发
|
||
if (isSwitching) return;
|
||
|
||
// 滑到顶部并继续下拉（-40 是一个触发阈值）
|
||
if (y < -40) {
|
||
setIsSwitching(true);
|
||
handleCategorySwitch('prev');
|
||
// 延迟重置isSwitching状态，给动画和数据加载留出时间
|
||
setTimeout(() => setIsSwitching(false), 600);
|
||
}
|
||
|
||
// 滑到底部并继续上推
|
||
// contentHeight <= layoutHeight 检查内容是否填满
|
||
// (如果没填满) y > 40 检查是否在空白处上拉
|
||
// (如果已填满) y + layoutHeight - contentHeight > 40 检查是否滚动到底部并继续上拉
|
||
if (contentHeight <= layoutHeight ? y > 40 : y + layoutHeight - contentHeight > 40) {
|
||
setIsSwitching(true);
|
||
handleCategorySwitch('next');
|
||
setTimeout(() => setIsSwitching(false), 600);
|
||
}
|
||
};
|
||
|
||
// 【新增】onLayout 事件处理函数
|
||
// 当右侧容器布局时，获取其高度
|
||
const onRightListLayout = (event: LayoutChangeEvent) => {
|
||
const { height } = event.nativeEvent.layout;
|
||
setRightListHeight(height);
|
||
};
|
||
|
||
|
||
const LeftItem = ({ id, title, icon, isSelected, onPress }: any) => (
|
||
<TouchableOpacity
|
||
style={[styles.leftItem, isSelected && styles.leftItemActive]}
|
||
onPress={onPress}
|
||
>
|
||
<Text style={styles.leftIcon}>{icon}</Text>
|
||
<Text style={[styles.leftTitle, isSelected && styles.leftTitleActive]}>{title}</Text>
|
||
{isSelected && <View style={styles.activeIndicator} />}
|
||
</TouchableOpacity>
|
||
);
|
||
|
||
const RightItem = ({ name, hot, image }: any) => (
|
||
<View style={styles.rightItem}>
|
||
<Image source={{ uri: image }} style={styles.gameImage} resizeMode="cover" />
|
||
<View style={styles.rightItemInfo}>
|
||
<View style={styles.rightItemContent}>
|
||
<Text style={styles.rightItemTitle} numberOfLines={1}>{name}</Text>
|
||
{hot && <View style={styles.hotBadge}><Text style={styles.hotText}>HOT</Text></View>}
|
||
</View>
|
||
<Text style={styles.rightItemDesc}>精彩游戏，等你来玩</Text>
|
||
</View>
|
||
</View>
|
||
);
|
||
|
||
return (
|
||
<SafeAreaView style={styles.safeAreaContainer}>
|
||
<View style={styles.container}>
|
||
<View style={styles.content}>
|
||
{/* 左侧分类 */}
|
||
<View style={styles.leftWrapper}>
|
||
<FlatList
|
||
data={categoryList}
|
||
renderItem={({ item }) => (
|
||
<LeftItem
|
||
id={item.id}
|
||
title={item.title}
|
||
icon={item.icon}
|
||
isSelected={selectedId === item.id}
|
||
onPress={() => setSelectedId(item.id)}
|
||
/>
|
||
)}
|
||
keyExtractor={item => item.id}
|
||
showsVerticalScrollIndicator={false}
|
||
/>
|
||
</View>
|
||
|
||
{/* 右侧内容 */}
|
||
{/* 【优化点 1】给容器添加 onLayout 来获取高度 */}
|
||
<View style={styles.contentRight} onLayout={onRightListLayout}>
|
||
{/* 只有在获取到高度后才渲染 FlatList，确保 minHeight 初始值正确 */}
|
||
{rightListHeight > 0 && (
|
||
<FlatList
|
||
ref={rightListRef}
|
||
data={mockData[selectedId] || []}
|
||
renderItem={({ item }) => (
|
||
<RightItem name={item.name} hot={item.hot} image={item.image} />
|
||
)}
|
||
keyExtractor={item => item.id}
|
||
showsVerticalScrollIndicator={false}
|
||
// bounces 必须为 true (默认值)
|
||
bounces={true}
|
||
scrollEventThrottle={16}
|
||
onScroll={handleScroll}
|
||
|
||
// 【优化点 2】为 iOS 添加，使其在内容不足时也能反弹
|
||
alwaysBounceVertical={true}
|
||
|
||
// 【优化点 3】设置 contentContainerStyle
|
||
contentContainerStyle={[
|
||
styles.rightListContent,
|
||
{
|
||
// 确保内容容器的最小高度
|
||
// 始终比 FlatList 视图本身高 1 像素
|
||
minHeight: rightListHeight + 1
|
||
}
|
||
]}
|
||
/>
|
||
)}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</SafeAreaView>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
safeAreaContainer: { flex: 1, backgroundColor: '#f5f5f5' },
|
||
container: { flex: 1 },
|
||
content: { flex: 1, flexDirection: 'row' },
|
||
leftWrapper: {
|
||
width: 90,
|
||
backgroundColor: '#fff',
|
||
borderRightWidth: 1,
|
||
borderRightColor: '#e0e0e0',
|
||
},
|
||
leftItem: {
|
||
paddingVertical: 18,
|
||
paddingHorizontal: 8,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
position: 'relative',
|
||
},
|
||
leftItemActive: { backgroundColor: '#f0f0f0' },
|
||
leftIcon: { fontSize: 24, marginBottom: 4 },
|
||
leftTitle: { fontSize: 12, color: '#666', textAlign: 'center' },
|
||
leftTitleActive: { color: '#1890ff', fontWeight: '600' },
|
||
activeIndicator: {
|
||
position: 'absolute',
|
||
left: 0,
|
||
top: '50%',
|
||
marginTop: -12,
|
||
width: 3,
|
||
height: 24,
|
||
backgroundColor: '#1890ff',
|
||
borderTopRightRadius: 2,
|
||
borderBottomRightRadius: 2,
|
||
},
|
||
contentRight: { flex: 1, backgroundColor: '#f5f5f5' },
|
||
rightListContent: {
|
||
padding: 12,
|
||
paddingBottom: 20
|
||
},
|
||
rightItem: {
|
||
backgroundColor: '#fff',
|
||
borderRadius: 8,
|
||
padding: 12,
|
||
marginBottom: 12,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 1 },
|
||
shadowOpacity: 0.05,
|
||
shadowRadius: 2,
|
||
elevation: 2,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
gameImage: {
|
||
width: 120,
|
||
height: 80,
|
||
borderRadius: 6,
|
||
marginRight: 12,
|
||
backgroundColor: '#f0f0f0',
|
||
},
|
||
rightItemInfo: { flex: 1, justifyContent: 'center' },
|
||
rightItemContent: { flexDirection: 'row', alignItems: 'center', marginBottom: 6 },
|
||
rightItemTitle: { fontSize: 15, fontWeight: '600', color: '#333', marginRight: 8, flex: 1 },
|
||
hotBadge: { backgroundColor: '#ff4d4f', paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4 },
|
||
hotText: { color: '#fff', fontSize: 10, fontWeight: '600' },
|
||
rightItemDesc: { fontSize: 13, color: '#999' },
|
||
}); |