优化联赛选择模态框性能

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>
   );
 }