优化联赛选择模态框性能

app/(tabs)/index.tsx

@@ -10,7 +10,7 @@ import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
 import { fetchLeagues, fetchSports, fetchTodayMatches } from "@/lib/api";
 import { League, Match, Sport } from "@/types/api";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
@@ -168,6 +168,29 @@ export default function HomeScreen() {
     console.log("Selected league:", leagueKey);
   };
 
+  // 缓存运动选项，避免每次渲染都重新计算
+  const sportOptions = useMemo(() => {
+    return sports.map((s) => {
+      const sportKeyMap: { [key: number]: string } = {
+        1: "football",
+        2: "basketball",
+        3: "tennis",
+        4: "cricket",
+        5: "baseball",
+        6: "badminton",
+        7: "snooker",
+        8: "volleyball",
+      };
+      const sportKey = sportKeyMap[s.id] || s.name.toLowerCase();
+      return {
+        id: s.id,
+        label: s.name,
+        value: s.id,
+        icon: s.icon,
+      };
+    });
+  }, [sports]);
+
   const renderHeader = () => (
     <View style={styles.filterContainer}>
       {/* Time/League Filter Toggle */}
@@ -265,49 +288,37 @@ export default function HomeScreen() {
         />
       )}
 
-      {/* Modals */}
-      <SelectionModal
-        visible={showSportModal}
-        onClose={() => setShowSportModal(false)}
-        title={t("home.select_sport")}
-        options={sports.map((s) => {
-          const sportKeyMap: { [key: number]: string } = {
-            1: "football",
-            2: "basketball",
-            3: "tennis",
-            4: "cricket",
-            5: "baseball",
-            6: "badminton",
-            7: "snooker",
-            8: "volleyball",
-          };
-          const sportKey = sportKeyMap[s.id] || s.name.toLowerCase();
-          return {
-            id: s.id,
-            label: s.name, // 保留原始名称用于图标识别
-            value: s.id,
-            icon: s.icon,
-          };
-        })}
-        selectedValue={selectedSportId}
-        onSelect={setSelectedSportId}
-      />
+      {/* Modals - 条件渲染，只在可见时渲染 */}
+      {showSportModal && (
+        <SelectionModal
+          visible={showSportModal}
+          onClose={() => setShowSportModal(false)}
+          title={t("home.select_sport")}
+          options={sportOptions}
+          selectedValue={selectedSportId}
+          onSelect={setSelectedSportId}
+        />
+      )}
 
-      <CalendarModal
-        visible={showCalendarModal}
-        onClose={() => setShowCalendarModal(false)}
-        selectedDate={selectedDate}
-        onSelectDate={setSelectedDate}
-      />
+      {showCalendarModal && (
+        <CalendarModal
+          visible={showCalendarModal}
+          onClose={() => setShowCalendarModal(false)}
+          selectedDate={selectedDate}
+          onSelectDate={setSelectedDate}
+        />
+      )}
 
-      <LeagueModal
-        visible={showLeagueModal}
-        onClose={() => setShowLeagueModal(false)}
-        leagues={leagues}
-        selectedLeagueKey={selectedLeagueKey}
-        loading={loadingLeagues}
-        onSelect={handleLeagueSelect}
-      />
+      {showLeagueModal && (
+        <LeagueModal
+          visible={showLeagueModal}
+          onClose={() => setShowLeagueModal(false)}
+          leagues={leagues}
+          selectedLeagueKey={selectedLeagueKey}
+          loading={loadingLeagues}
+          onSelect={handleLeagueSelect}
+        />
+      )}
     </ThemedView>
   );
 }

components/league-modal.tsx

@@ -4,9 +4,9 @@ import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
 import { League } from "@/types/api";
 import { Image } from "expo-image";
-import React from "react";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { ActivityIndicator, Modal, Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { ActivityIndicator, FlatList, Modal, Pressable, StyleSheet, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 interface LeagueModalProps {
@@ -31,6 +31,104 @@ export function LeagueModal({
   const isDark = theme === "dark";
   const bg = isDark ? "#1C1C1E" : "#FFFFFF";
   const text = isDark ? "#FFFFFF" : "#000000";
+  const optionBg = isDark ? "#2C2C2E" : "#F5F5F5";
+  const iconBg = isDark ? "#3A3A3C" : "#E5E5EA";
+
+  const renderLeagueItem = ({ item: league }: { item: League }) => {
+    const isSelected = selectedLeagueKey === league.key;
+
+    return (
+      <Pressable
+        style={[styles.option, { backgroundColor: optionBg }]}
+        onPress={() => {
+          onSelect(league.key);
+          onClose();
+        }}
+      >
+        {/* 左侧图标 */}
+        <View style={[styles.iconContainer, { backgroundColor: iconBg }]}>
+          {league.logo ? (
+            <Image
+              source={{ uri: league.logo }}
+              style={styles.leagueLogo}
+              contentFit="contain"
+            />
+          ) : (
+            <IconSymbol name="trophy-outline" size={24} color={text} />
+          )}
+        </View>
+
+        {/* 中间内容 */}
+        <View style={styles.content}>
+          <ThemedText
+            style={[
+              styles.leagueName,
+              { fontWeight: isSelected ? "600" : "400" },
+            ]}
+          >
+            {league.name}
+          </ThemedText>
+          {league.countryName && (
+            <ThemedText style={styles.countryName}>
+              {league.countryName}
+            </ThemedText>
+          )}
+        </View>
+
+        {/* 右侧指示点 */}
+        <View
+          style={[
+            styles.indicator,
+            {
+              backgroundColor: isSelected
+                ? Colors.light.tint
+                : isDark
+                  ? "#666666"
+                  : "#CCCCCC",
+            },
+          ]}
+        />
+      </Pressable>
+    );
+  };
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color={Colors[theme].tint} />
+          <ThemedText style={styles.loadingText}>
+            {t("home.loading")}
+          </ThemedText>
+        </View>
+      );
+    }
+
+    if (leagues.length === 0) {
+      return (
+        <View style={styles.emptyContainer}>
+          <ThemedText style={styles.emptyText}>
+            {t("home.no_leagues")}
+          </ThemedText>
+        </View>
+      );
+    }
+
+    return (
+      <FlatList
+        data={leagues}
+        renderItem={renderLeagueItem}
+        keyExtractor={(item) => item.id.toString()}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.listContent}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={10}
+        updateCellsBatchingPeriod={50}
+        windowSize={10}
+        initialNumToRender={10}
+      />
+    );
+  };
 
   return (
     <Modal
@@ -53,86 +151,7 @@ export function LeagueModal({
               <IconSymbol name="close" size={24} color={text} />
             </Pressable>
           </View>
-          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
-            {loading ? (
-              <View style={styles.loadingContainer}>
-                <ActivityIndicator size="large" color={Colors[theme].tint} />
-                <ThemedText style={styles.loadingText}>
-                  {t("home.loading")}
-                </ThemedText>
-              </View>
-            ) : leagues.length === 0 ? (
-              <View style={styles.emptyContainer}>
-                <ThemedText style={styles.emptyText}>
-                  {t("home.no_leagues")}
-                </ThemedText>
-              </View>
-            ) : (
-              leagues.map((league) => {
-                const isSelected = selectedLeagueKey === league.key;
-                const optionBg = isDark ? "#2C2C2E" : "#F5F5F5";
-                const iconBg = isDark ? "#3A3A3C" : "#E5E5EA";
-
-                return (
-                  <Pressable
-                    key={league.id}
-                    style={[
-                      styles.option,
-                      { backgroundColor: optionBg },
-                    ]}
-                    onPress={() => {
-                      onSelect(league.key);
-                      onClose();
-                    }}
-                  >
-                    {/* 左侧图标 */}
-                    <View style={[styles.iconContainer, { backgroundColor: iconBg }]}>
-                      {league.logo ? (
-                        <Image
-                          source={{ uri: league.logo }}
-                          style={styles.leagueLogo}
-                          contentFit="contain"
-                        />
-                      ) : (
-                        <IconSymbol name="trophy-outline" size={24} color={text} />
-                      )}
-                    </View>
-
-                    {/* 中间内容 */}
-                    <View style={styles.content}>
-                      <ThemedText
-                        style={[
-                          styles.leagueName,
-                          { fontWeight: isSelected ? "600" : "400" },
-                        ]}
-                      >
-                        {league.name}
-                      </ThemedText>
-                      {league.countryName && (
-                        <ThemedText style={styles.countryName}>
-                          {league.countryName}
-                        </ThemedText>
-                      )}
-                    </View>
-
-                    {/* 右侧指示点 */}
-                    <View
-                      style={[
-                        styles.indicator,
-                        {
-                          backgroundColor: isSelected
-                            ? Colors.light.tint
-                            : isDark
-                              ? "#666666"
-                              : "#CCCCCC",
-                        },
-                      ]}
-                    />
-                  </Pressable>
-                );
-              })
-            )}
-          </ScrollView>
+          {renderContent()}
         </SafeAreaView>
       </View>
     </Modal>
@@ -166,8 +185,8 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  scrollView: {
-    maxHeight: 400,
+  listContent: {
+    paddingBottom: 20,
   },
   loadingContainer: {
     padding: 40,

components/selection-modal.tsx

@@ -5,7 +5,7 @@ import { useTheme } from "@/context/ThemeContext";
 import { Image } from "expo-image";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Modal, Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { FlatList, Modal, Pressable, StyleSheet, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 interface SelectionOption {
@@ -119,6 +119,65 @@ export function SelectionModal({
   const isDark = theme === "dark";
   const bg = isDark ? "#1C1C1E" : "#FFFFFF";
   const text = isDark ? "#FFFFFF" : "#000000";
+  const optionBg = isDark ? "#2C2C2E" : "#F5F5F5";
+  const iconBg = isDark ? "#3A3A3C" : "#E5E5EA";
+
+  const renderOption = ({ item: opt }: { item: SelectionOption }) => {
+    const isSelected = selectedValue === opt.value;
+    
+    // 获取运动键用于i18n和图标
+    const sportId = typeof opt.id === "number" ? opt.id : undefined;
+    const sportKey = sportId ? getSportKeyById(sportId) : getSportIconName(opt.label, sportId);
+    const sportName = t(`sports.${sportKey}`, { defaultValue: opt.label });
+
+    return (
+      <Pressable
+        style={[styles.option, { backgroundColor: optionBg }]}
+        onPress={() => {
+          onSelect(opt.value);
+          onClose();
+        }}
+      >
+        {/* 左侧图标 */}
+        <View style={[styles.iconContainer, { backgroundColor: iconBg }]}>
+          <Image
+            source={getSportIconSource(opt.label, isSelected, sportId)}
+            style={styles.iconImage}
+            contentFit="contain"
+          />
+        </View>
+
+        {/* 中间内容 */}
+        <View style={styles.content}>
+          <ThemedText
+            style={[
+              styles.optionLabel,
+              { fontWeight: isSelected ? "600" : "400" },
+            ]}
+          >
+            {sportName}
+          </ThemedText>
+          <ThemedText style={styles.statusText}>
+            {isSelected ? t("selection.selected") : t("selection.click_to_toggle")}
+          </ThemedText>
+        </View>
+
+        {/* 右侧指示点 */}
+        <View
+          style={[
+            styles.indicator,
+            {
+              backgroundColor: isSelected
+                ? Colors.light.tint
+                : isDark
+                  ? "#666666"
+                  : "#CCCCCC",
+            },
+          ]}
+        />
+      </Pressable>
+    );
+  };
 
   return (
     <Modal
@@ -141,70 +200,18 @@ export function SelectionModal({
               <IconSymbol name="close" size={24} color={text} />
             </Pressable>
           </View>
-          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
-            {options.map((opt) => {
-              const isSelected = selectedValue === opt.value;
-              const optionBg = isDark ? "#2C2C2E" : "#F5F5F5";
-              const iconBg = isDark ? "#3A3A3C" : "#E5E5EA";
-              
-              // 获取运动键用于i18n和图标
-              const sportId = typeof opt.id === "number" ? opt.id : undefined;
-              const sportKey = sportId ? getSportKeyById(sportId) : getSportIconName(opt.label, sportId);
-              const sportName = t(`sports.${sportKey}`, { defaultValue: opt.label });
-
-              return (
-                <Pressable
-                  key={opt.id}
-                  style={[
-                    styles.option,
-                    { backgroundColor: optionBg },
-                  ]}
-                  onPress={() => {
-                    onSelect(opt.value);
-                    onClose();
-                  }}
-                >
-                  {/* 左侧图标 */}
-                  <View style={[styles.iconContainer, { backgroundColor: iconBg }]}>
-                    <Image
-                      source={getSportIconSource(opt.label, isSelected, sportId)}
-                      style={styles.iconImage}
-                      contentFit="contain"
-                    />
-                  </View>
-
-                  {/* 中间内容 */}
-                  <View style={styles.content}>
-                    <ThemedText
-                      style={[
-                        styles.optionLabel,
-                        { fontWeight: isSelected ? "600" : "400" },
-                      ]}
-                    >
-                      {sportName}
-                    </ThemedText>
-                    <ThemedText style={styles.statusText}>
-                      {isSelected ? t("selection.selected") : t("selection.click_to_toggle")}
-                    </ThemedText>
-                  </View>
-
-                  {/* 右侧指示点 */}
-                  <View
-                    style={[
-                      styles.indicator,
-                      {
-                        backgroundColor: isSelected
-                          ? Colors.light.tint
-                          : isDark
-                            ? "#666666"
-                            : "#CCCCCC",
-                      },
-                    ]}
-                  />
-                </Pressable>
-              );
-            })}
-          </ScrollView>
+          <FlatList
+            data={options}
+            renderItem={renderOption}
+            keyExtractor={(item) => item.id.toString()}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.listContent}
+            removeClippedSubviews={true}
+            maxToRenderPerBatch={10}
+            updateCellsBatchingPeriod={50}
+            windowSize={10}
+            initialNumToRender={10}
+          />
         </SafeAreaView>
       </View>
     </Modal>
@@ -238,8 +245,8 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  scrollView: {
-    maxHeight: 400,
+  listContent: {
+    paddingBottom: 20,
   },
   option: {
     flexDirection: "row",