mirror of
https://github.com/zimplexing/OrionTV.git
synced 2026-02-04 03:36:29 +08:00
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.
107 lines
3.5 KiB
TypeScript
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,
|
|
},
|
|
});
|