底部安全距离&样式

app/(tabs)/index.tsx

@@ -29,11 +29,13 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function HomeScreen() {
   const router = useRouter();
   const { theme } = useTheme();
   const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
   const isDark = theme === "dark";
   const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
   const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
@@ -625,7 +627,10 @@ export default function HomeScreen() {
               </View>
             ) : null
           }
-          contentContainerStyle={styles.listContent}
+          contentContainerStyle={[
+            styles.listContent,
+            { paddingBottom: 80 + insets.bottom },
+          ]}
           ListEmptyComponent={
             <View style={styles.center}>
               <ThemedText>{t("home.no_matches")}</ThemedText>

app/profile.tsx

@@ -12,9 +12,11 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
+import { Colors } from "@/constants/theme";
 import { useAppState } from "@/context/AppStateContext";
 import { useTheme } from "@/context/ThemeContext";
 import { changeLanguage, SUPPORTED_LANGUAGES } from "@/i18n";
@@ -37,6 +39,7 @@ const BOOKMAKERS = [
 export default function ProfileScreen() {
   const { theme, toggleTheme, setTheme, isSystemTheme, useSystemTheme } =
     useTheme();
+  const insets = useSafeAreaInsets();
   const {
     state,
     updateOddsSettings,
@@ -215,7 +218,7 @@ export default function ProfileScreen() {
           headerBackTitle: t("settings.back"),
           // Ensure header matches theme to avoid white flash
           headerStyle: {
-            backgroundColor: isDark ? "#000" : "#f2f2f7",
+            backgroundColor: isDark ? Colors.dark.background : "#f2f2f7",
           },
           headerTintColor: textColor,
           headerShadowVisible: false,
@@ -223,14 +226,17 @@ export default function ProfileScreen() {
           presentation: "card",
           animation: "slide_from_right",
           // Set the scene/content background to match theme during transition
-          contentStyle: { backgroundColor: isDark ? "#000" : "#f2f2f7" },
+          contentStyle: {
+            backgroundColor: isDark ? Colors.dark.background : "#f2f2f7",
+          },
         }}
       />
       <ScrollView
         style={[
           styles.container,
-          { backgroundColor: isDark ? "#000" : "#f2f2f7" },
+          { backgroundColor: isDark ? Colors.dark.background : "#f2f2f7" },
         ]}
+        contentContainerStyle={{ paddingBottom: 80 + insets.bottom }}
       >
         <View
           style={[
@@ -343,7 +349,11 @@ export default function ProfileScreen() {
                 <ThemedText>{t("settings.language")}</ThemedText>
               </View>
               <View style={{ flexDirection: "row", alignItems: "center" }}>
-                <ThemedText style={{ color: subTextColor, marginRight: 4 }}>
+                <ThemedText
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                  style={{ color: subTextColor, marginRight: 4, maxWidth: 140 }}
+                >
                   {getCurrentLanguageName()}
                 </ThemedText>
                 <IconSymbol
@@ -798,7 +808,7 @@ const styles = StyleSheet.create({
   },
   button: {
     paddingHorizontal: 10,
-    paddingVertical: 5,
+    paddingVertical: 0,
   },
   googleButton: {
     width: "100%",

components/matches-by-league.tsx

@@ -21,6 +21,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // 开启 Android 上的 LayoutAnimation
 if (
@@ -45,6 +46,7 @@ export function MatchesByLeague({
   onFavoriteToggle,
   enableCollapsible = true,
 }: MatchesByLeagueProps) {
+  const insets = useSafeAreaInsets();
   const { theme } = useTheme();
   const isDark = theme === "dark";
 
@@ -184,7 +186,10 @@ export function MatchesByLeague({
         styles.container,
         { backgroundColor: isDark ? Colors.dark.background : "#FFFFFF" },
       ]}
-      contentContainerStyle={{ paddingBottom: 40, paddingTop: 8 }}
+      contentContainerStyle={{
+        paddingBottom: 80 + insets.bottom,
+        paddingTop: 8,
+      }}
     >
       {leagues.map((league) => {
         const isCollapsed = collapsed[league.key] !== false;