StatusBarの表示ロジックを改善し、Appsコンポーネントにフォーカス状態を追加

Apps.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { NavigationContainer, DarkTheme, DefaultTheme } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { Animated, Platform, ActivityIndicator, View, StyleSheet } from "react-native";
+import { Animated, Platform, ActivityIndicator, View, StyleSheet, StatusBar } from "react-native";
 import { useNavigationState } from "@react-navigation/native";
 import { useFonts } from "expo-font";
 import { LinearGradient } from "expo-linear-gradient";
@@ -128,7 +128,6 @@ export function AppContainer() {
         setIsExtraWindowOpen(hasExtra);
       }}
     >
-      {/* @ts-expect-error - Tab.Navigator type definition issue */}
       <Tab.Navigator
         initialRouteName="topMenu"
         screenOptions={({ route }) => {

StatusbarDetect.tsx

@@ -1,11 +1,8 @@
 import React, { FC } from "react";
 import { Platform, StatusBar } from "react-native";
-import { useThemeColors } from "@/lib/theme";
 
 const StatusbarDetect: FC = () => {
-  const { isDark } = useThemeColors();
-  const barStyle = isDark ? "light-content" : "dark-content";
-  return <StatusBar barStyle={barStyle} translucent backgroundColor="transparent" />;
+  return <StatusBar barStyle="light-content" translucent backgroundColor="transparent" />;
 };
 
 export default StatusbarDetect;

components/Apps.tsx

@@ -16,7 +16,7 @@ import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useDeviceOrientationChange } from "../stateBox/useDeviceOrientationChange";
 import { SheetManager } from "react-native-actions-sheet";
 
-import { useNavigation } from "@react-navigation/native";
+import { useNavigation, useIsFocused } from "@react-navigation/native";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
 import { AppsWebView } from "./Apps/WebView";
 import { NewMenu } from "./Apps/NewMenu";
@@ -35,6 +35,7 @@ export default function Apps() {
   const { originalStationList } = useStationList();
   const { mapSwitch, trainInfo, setTrainInfo, selectedLine } = useTrainMenu();
   const isDark = useColorScheme() === "dark";
+  const isFocused = useIsFocused();
 
   const lineColor = selectedLine && stationIDPair[selectedLine]
     ? lineColorList[stationIDPair[selectedLine]]
@@ -83,7 +84,7 @@ export default function Apps() {
   const bgColor = isDark ? "#1c1c1e" : "#ffffff";
   return (
     <View style={{ flex: 1, backgroundColor: bgColor }}>
-      {lineColor && lineColorDark && (
+      {isFocused && mapSwitch === "true" && lineColor && lineColorDark && (
         <LinearGradient
           colors={[lineColorDark, lineColor]}
           start={{ x: 0, y: 0 }}
@@ -91,10 +92,11 @@ export default function Apps() {
           style={{ position: "absolute", top: 0, left: 0, right: 0, height: top }}
         />
       )}
-      {lineColor && (
-        <StatusBar
-          barStyle="light-content"
-        />
+      {isFocused && mapSwitch !== "true" && (
+        <View style={{ position: "absolute", top: 0, left: 0, right: 0, height: top, backgroundColor: "#0099CC" }} />
+      )}
+      {isFocused && (
+        <StatusBar barStyle="light-content" />
       )}
       <View
         style={{

menu.tsx

@@ -1,12 +1,11 @@
 import React, { useRef, useState, useEffect, useCallback, useMemo, FC } from "react";
-import { Platform, View, ScrollView, LayoutAnimation, Text, InteractionManager, useWindowDimensions, Image } from "react-native";
+import { Platform, View, ScrollView, LayoutAnimation, Text, InteractionManager, useWindowDimensions, Image, StatusBar } from "react-native";
 import Constants from "expo-constants";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   configureReanimatedLogger,
   ReanimatedLogLevel,
 } from "react-native-reanimated";
-import StatusbarDetect from "@/StatusbarDetect";
 import { useThemeColors } from "@/lib/theme";
 import { useResponsive } from "@/lib/responsive";
 
@@ -16,7 +15,7 @@ import { FixedContentBottom } from "@/components/Menu/FixedContentBottom";
 
 import { lineList, stationIDPair } from "@/lib/getStationList";
 import { useFavoriteStation } from "@/stateBox/useFavoriteStation";
-import { useNavigation } from "@react-navigation/native";
+import { useNavigation, useIsFocused } from "@react-navigation/native";
 import { useStationList } from "@/stateBox/useStationList";
 import { TopMenuButton } from "@/components/Menu/TopMenuButton";
 import { JRSTraInfoBox } from "@/components/Menu/JRSTraInfoBox";
@@ -49,6 +48,7 @@ export const Menu: FC<props> = (props) => {
   const { scrollRef, mapHeight, MapFullHeight, mapMode, setMapMode } = props;
   const { navigate } = useNavigation();
   const { colors, isDark } = useThemeColors();
+  const isMenuFocused = useIsFocused();
   const { verticalScale } = useResponsive();
   const insets = useSafeAreaInsets();
   const { favoriteStation } = useFavoriteStation();
@@ -289,7 +289,12 @@ export const Menu: FC<props> = (props) => {
         paddingTop: Platform.OS === "web" ? 0 : insets.top,
       }}
     >
-      <StatusbarDetect />
+      {isMenuFocused && (
+        <StatusBar
+          barStyle={isDark ? "light-content" : "dark-content"}
+          translucent
+        />
+      )}
       {!mapMode ? <TitleBar /> : <></>}
       <ScrollView
         ref={scrollRef}