Files
OrionTV/app/_layout.tsx
zimplexing cdf0d72bdc fix(ui): resolve status bar overlay issue across all screens
Add SafeAreaProvider to root layout and implement proper safe area handling:
- Wrap app in SafeAreaProvider in _layout.tsx
- Update HomeScreen to use safe area insets for proper top padding
- Fix SettingsScreen safe area handling for all device types
- Update ResponsiveHeader to use SafeAreaContext instead of manual calculation

This ensures content is not covered by the status bar on mobile and tablet devices while maintaining TV compatibility.
2025-08-13 19:23:32 +08:00

107 lines
3.5 KiB
TypeScript

import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { useEffect } from "react";
import { Platform, View, StyleSheet } from "react-native";
import Toast from "react-native-toast-message";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { useSettingsStore } from "@/stores/settingsStore";
import { useRemoteControlStore } from "@/stores/remoteControlStore";
import LoginModal from "@/components/LoginModal";
import useAuthStore from "@/stores/authStore";
import { useUpdateStore, initUpdateStore } from "@/stores/updateStore";
import { UpdateModal } from "@/components/UpdateModal";
import { UPDATE_CONFIG } from "@/constants/UpdateConfig";
import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
const colorScheme = "dark";
const [loaded, error] = useFonts({
SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
});
const { loadSettings, remoteInputEnabled, apiBaseUrl } = useSettingsStore();
const { startServer, stopServer } = useRemoteControlStore();
const { checkLoginStatus } = useAuthStore();
const { checkForUpdate, lastCheckTime } = useUpdateStore();
const responsiveConfig = useResponsiveLayout();
useEffect(() => {
const initializeApp = async () => {
await loadSettings();
};
initializeApp();
initUpdateStore(); // 初始化更新存储
}, [loadSettings]);
useEffect(() => {
if (apiBaseUrl) {
checkLoginStatus(apiBaseUrl);
}
}, [apiBaseUrl, checkLoginStatus]);
useEffect(() => {
if (loaded || error) {
SplashScreen.hideAsync();
if (error) {
console.warn(`Error in loading fonts: ${error}`);
}
}
}, [loaded, error]);
// 检查更新
useEffect(() => {
if (loaded && UPDATE_CONFIG.AUTO_CHECK && Platform.OS === 'android') {
// 检查是否需要自动检查更新
const shouldCheck = Date.now() - lastCheckTime > UPDATE_CONFIG.CHECK_INTERVAL;
if (shouldCheck) {
checkForUpdate(true); // 静默检查
}
}
}, [loaded, lastCheckTime, checkForUpdate]);
useEffect(() => {
if (remoteInputEnabled) {
startServer();
} else {
stopServer();
}
}, [remoteInputEnabled, startServer, stopServer]);
if (!loaded && !error) {
return null;
}
return (
<SafeAreaProvider>
<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
<View style={styles.container}>
<Stack>
<Stack.Screen name="index" options={{ headerShown: false }} />
<Stack.Screen name="detail" options={{ headerShown: false }} />
{Platform.OS !== "web" && <Stack.Screen name="play" options={{ headerShown: false }} />}
<Stack.Screen name="search" options={{ headerShown: false }} />
<Stack.Screen name="live" options={{ headerShown: false }} />
<Stack.Screen name="settings" options={{ headerShown: false }} />
<Stack.Screen name="favorites" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
</Stack>
</View>
<Toast />
<LoginModal />
<UpdateModal />
</ThemeProvider>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});