メニューの地図機能の仮作成

MenuPage.js

@@ -1,5 +1,10 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
+import { useWindowDimensions, Platform } from "react-native";
+import Constants from "expo-constants";
+
+import { Dimensions, StatusBar } from "react-native";
+
 import { SheetManager } from "react-native-actions-sheet";
 import { AS } from "./storageControl";
 import TrainBase from "./components/trainbaseview";
@@ -13,10 +18,13 @@ import AllTrainDiagramView from "./components/AllTrainDiagramView";
 import { useCurrentTrain } from "./stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
 import { news } from "./config/newsUpdate";
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
 const Stack = createStackNavigator();
 
 export function MenuPage() {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
+  const { height, width } = useWindowDimensions();
+  const tabBarHeight = useBottomTabBarHeight();
   const { getCurrentTrain } = useCurrentTrain();
   const navigation = useNavigation();
   const { addListener } = navigation;
@@ -42,8 +50,20 @@ export function MenuPage() {
       })
       .catch((error) => console.error("Error fetching icon setting:", error));
   }, []);
+
+  const scrollRef = useRef(null);
+  const MapHeight =
+    height -
+    tabBarHeight +
+    (Platform.OS == "android" ? Constants.statusBarHeight : 0) -
+    100 -
+    ((((width / 100) * 80) / 20) * 9 + 10 + 30);
   useEffect(() => {
     const unsubscribe = addListener("tabPress", (e) => {
+      scrollRef.current.scrollTo({
+        y: MapHeight - 80,
+        animated: true,
+      });
       AS.getItem("favoriteStation")
         .then((d) => {
           const returnData = JSON.parse(d);
@@ -65,7 +85,9 @@ export function MenuPage() {
           gestureEnabled: true,
           headerTransparent: true,
         }}
-        children={() => <Menu getCurrentTrain={getCurrentTrain} />}
+        children={() => (
+          <Menu getCurrentTrain={getCurrentTrain} scrollRef={scrollRef} />
+        )}
       />
       <Stack.Screen name="news" options={optionData} component={News} />
       <Stack.Screen