rn-app/pages/HomeScreen/index.tsx

/**
 * 完整首页容器
 * 包含 Header、内容区域、BottomTabs
 * 支持主题切换和真实数据
 */
import React, { useState, useEffect, useCallback } from 'react';
import { View, ScrollView, RefreshControl, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { createThemeStyles, useColorScheme, useThemeInfo } from '@/theme';
import {
  Header,
  BannerSwiper,
  NoticeBar,
  GameMainMenus,
  GameSubMenus,
  Lobby,
  HighPrizeGame,
  FastFootNav,
} from './components';
import { requestHomePageData } from '@/stores/gameStore';
import { useTenantLoad } from '@/stores/tenantStore';
import type {
  Banner,
  Notice,
  GameCategory,
  Game,
  HighPrizeGame as HighPrizeGameType,
} from '@/types/home';

/**
 * 创建主题样式
 */
const styles = createThemeStyles((colors) => ({
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },
  contentContainer: {
    flex: 1,
  },
  scrollContent: {
    paddingBottom: 20,
  },
}));

/**
 * 完整首页容器
 */
export default function HomePage() {
  const colorScheme = useColorScheme();
  const s = styles[colorScheme];
  const { isDark: isDarkTheme, colors } = useThemeInfo();

  const [refreshing, setRefreshing] = useState(false);
  const tenantLoad = useTenantLoad();

  // 加载首页数据
  const loadHomePageData = useCallback(async () => {
    try {
      await requestHomePageData();
    } catch (error) {
      console.error('加载首页数据失败:', error);
    }
  }, []);

  // 初始化加载
  useEffect(() => {
    console.log('租户数据加载完成:', tenantLoad);
    if (tenantLoad) {
      loadHomePageData();
    }
  }, [loadHomePageData, tenantLoad]);

  // 下拉刷新
  const handleRefresh = useCallback(async () => {
    setRefreshing(true);
    try {
      await loadHomePageData();
    } finally {
      setRefreshing(false);
    }
  }, [loadHomePageData]);

  // 处理游戏点击
  const handleGamePress = useCallback((game: Game) => {
    Alert.alert('游戏', `点击了: ${game.play_up_name}`);
    // 这里可以添加打开游戏的逻辑
  }, []);

  // 处理底部 Tab 点击
  const handleTabPress = useCallback((tabId: string, action: string) => {
    Alert.alert('导航', `点击了: ${tabId}`);
    // 这里可以添加导航逻辑
  }, []);

  // 处理搜索
  const handleSearch = useCallback((keyword: string) => {
    Alert.alert('搜索', `搜索关键词: ${keyword}`);
    // 这里可以添加搜索逻辑
  }, []);

  // 处理消息按钮点击
  const handleMessagePress = useCallback(() => {
    Alert.alert('消息', '进入消息中心');
    // 这里可以添加导航到消息页面的逻辑
  }, []);

  // 处理客服按钮点击
  const handleServicePress = useCallback(() => {
    Alert.alert('客服', '联系客服');
    // 这里可以添加导航到客服页面的逻辑
  }, []);

  // 根据主题选择要显示的组件
  const renderContent = () => {
    if (isDarkTheme) {
      // 深色主题布局
      return (
        <>
          <GameMainMenus />
          <BannerSwiper />
          <NoticeBar
            onMessagePress={handleMessagePress}
            onServicePress={handleServicePress}
            unreadCount={3}
          />
          <HighPrizeGame onGamePress={handleGamePress} />
          <Lobby onGamePress={handleGamePress} />
          <FastFootNav onTabPress={handleTabPress} />
        </>
      );
    } else {
      // 浅色主题布局
      return (
        <>
          <BannerSwiper />
          <NoticeBar
            onMessagePress={handleMessagePress}
            onServicePress={handleServicePress}
            unreadCount={3}
          />
          <GameMainMenus />
          <GameSubMenus />
          <Lobby onGamePress={handleGamePress} />
        </>
      );
    }
  };

  return (
    <SafeAreaView style={s.container}>
      {/* Header */}
      <Header />

      {/* 内容区域 */}
      <View style={s.contentContainer}>
        <ScrollView
          style={s.contentContainer}
          refreshControl={
            <RefreshControl
              refreshing={refreshing}
              onRefresh={handleRefresh}
              tintColor={colors.primary}
            />
          }
          showsVerticalScrollIndicator={false}
        >
          <View style={s.scrollContent}>{renderContent()}</View>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
}