地図の機能が一通り動くようになった

menu.js

@@ -37,6 +37,7 @@ import lineColorList from "./assets/originData/lineColorList";
 import { AS } from "./storageControl";
 import { SimpleDot } from "./components/Menu/SimpleDot";
 import { useAllTrainDiagram } from "./stateBox/useAllTrainDiagram";
+import MapView from "react-native-maps";
 
 export default function Menu({ getCurrentTrain }) {
   const { navigate } = useNavigation();
@@ -44,13 +45,28 @@ export default function Menu({ getCurrentTrain }) {
   const { originalStationList } = useStationList();
   const { height, width } = useWindowDimensions();
   const scrollRef = useRef(null);
+  const [mapsOpacity, setMapsOpacity] = useState(1);
+  const mapsSizeOffset =
+    (height / 100) * 60 - (((width / 100) * 80) / 20) * 9 + 60 - (Platform.OS == "ios" ? Constants.statusBarHeight : 0);
   useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTo({
-        y: (height / 100) * 60 - (((width / 100) * 80) / 20) * 9 + 30,
-        animated: false,
-      });
-    }
+    setTimeout(() => {
+      if (scrollRef.current) {
+        scrollRef.current.scrollTo({
+          y: mapsSizeOffset,
+          animated: false,
+        });
+      }
+    }, 10);
+  }, []);
+  useEffect(() => {
+    setTimeout(() => {
+      if (scrollRef.current) {
+        scrollRef.current.scrollTo({
+          y: mapsSizeOffset,
+          animated: false,
+        });
+      }
+    }, 10);
   }, []);
 
   //位置情報
@@ -186,21 +202,49 @@ export default function Menu({ getCurrentTrain }) {
       <StatusbarDetect />
       <TitleBar />
       <ScrollView
-        stickyHeaderIndices={[0, 2]}
+        stickyHeaderIndices={[1, 3]}
         ref={scrollRef}
         snapToStart={false}
         snapToEnd={false}
         decelerationRate={"normal"}
-        snapToOffsets={[
-          (height / 100) * 60 - (((width / 100) * 80) / 20) * 9 + 30,
-        ]}
+        onScroll={(d) => {
+          console.log(Object.keys(scrollRef.current));
+          const scrollY = d.nativeEvent.contentOffset.y;
+          if (scrollY < mapsSizeOffset) {
+            setMapsOpacity(scrollY / mapsSizeOffset);
+          }
+        }}
+        snapToOffsets={[mapsSizeOffset]}
       >
+        <View style={{ position: "relative", height: 0 }}>
+          <MapView
+            style={{
+              flex: 1,
+              width: "100%",
+              position: "absolute",
+              height:
+                (height / 100) * 60 + (((width / 100) * 80) / 20) * 9 + 60,
+              opacity: 1 - mapsOpacity,
+            }}
+            showsUserLocation={true}
+            loadingEnabled={true}
+            showsMyLocationButton={false}
+            moveOnMarkerPress={false}
+            showsCompass={false}
+            //provider={PROVIDER_GOOGLE}
+            initialRegion={{
+              latitude: 33.774519,
+              longitude: 133.533306,
+              latitudeDelta: 1.8, //小さくなるほどズーム
+              longitudeDelta: 1.8,
+            }}
+            onPress={() => {
+              alert("地図をタップ");
+            }}
+          ></MapView>
+        </View>
         <TopMenuButton />
-        <View
-          style={{
-            height: (height / 100) * 60 - (((width / 100) * 80) / 20) * 9 + 30,
-          }}
-        ></View>
+        <View style={{ height: mapsSizeOffset }} />
         <></>
         {originalStationList.length != 0 && allStationData.length != 0 && (
           <View style={{ flex: 1, paddingTop: 10 }}>