menuに新しい概念を作成

menu.js

@@ -8,7 +8,7 @@ import {
   Text,
   TouchableOpacity,
   LayoutAnimation,
-  Dimensions,
+  useWindowDimensions,
 } from "react-native";
 import Constants from "expo-constants";
 import * as Location from "expo-location";
@@ -42,6 +42,16 @@ export default function Menu({ getCurrentTrain }) {
   const { navigate } = useNavigation();
   const { favoriteStation } = useFavoriteStation();
   const { originalStationList } = useStationList();
+  const { height, width } = useWindowDimensions();
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTo({
+        y: (height / 100) * 60 - (((width / 100) * 80) / 20) * 9 + 30,
+        animated: false,
+      });
+    }
+  }, []);
 
   //位置情報
   const [locationStatus, setLocationStatus] = useState(null);
@@ -131,7 +141,7 @@ export default function Menu({ getCurrentTrain }) {
   }, [selectedCurrentStation]);
 
   //全列車ダイヤリストを作成するuseEffect
-  const { allTrainDiagram:trainDiagram} = useAllTrainDiagram();
+  const { allTrainDiagram: trainDiagram } = useAllTrainDiagram();
 
   const oPSign = () => {
     const payload = {
@@ -165,7 +175,6 @@ export default function Menu({ getCurrentTrain }) {
     );
     setDotButton(!dotButton);
   };
-  const width = Dimensions.get("window").width;
   return (
     <View
       style={{
@@ -176,14 +185,29 @@ export default function Menu({ getCurrentTrain }) {
     >
       <StatusbarDetect />
       <TitleBar />
-      <ScrollView>
+      <ScrollView
+        stickyHeaderIndices={[0, 2]}
+        ref={scrollRef}
+        snapToStart={false}
+        snapToEnd={false}
+        decelerationRate={"normal"}
+        snapToOffsets={[
+          (height / 100) * 60 - (((width / 100) * 80) / 20) * 9 + 30,
+        ]}
+      >
         <TopMenuButton />
+        <View
+          style={{
+            height: (height / 100) * 60 - (((width / 100) * 80) / 20) * 9 + 30,
+          }}
+        ></View>
+        <></>
         {originalStationList.length != 0 && allStationData.length != 0 && (
           <View style={{ flex: 1, paddingTop: 10 }}>
             <Carousel
               ref={carouselRef}
               data={originalStationList && allStationData}
-              height={(wp("80%") / 20) * 9 + 10}
+              height={(((width / 100) * 80) / 20) * 9 + 10}
               pagingEnabled={true}
               snapEnabled={true}
               loop={false}