現在地ジャンプ機能を実装

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
   View,
   Text,
@@ -7,6 +7,7 @@ import {
   useWindowDimensions,
   BackHandler,
   Linking,
+  LayoutAnimation,
 } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
@@ -173,6 +174,28 @@ export const EachTrainInfoCore = ({
     trainPositionSwitch == "true"
       ? findReversalPoints(currentPosition, stopStationIDList)
       : stopStationIDList.map(() => false);
+  const [isJumped, setIsJumped] = useState(false);
+  useEffect(() => {
+    if (isJumped) return () => {};
+    if (!points) return () => {};
+    if (points.length == 0) return () => {};
+    const position = points.findIndex((d) => d == true);
+    if (position == -1) return () => {};
+    if (trainDataWidhThrough[position].split(",")[1] == "通過") {
+      LayoutAnimation.configureNext({
+        duration: 200,
+        update: { type: "easeInEaseOut", springDamping: 0.6 },
+      });
+      setShowThrew(true);
+    }
+    const count = position * 44-30;
+    // 0.5秒待機してからスクロール
+    setTimeout(
+      () => ScrollViewRef.current?.scrollTo({ y: count, animated: true }),
+      500
+    );
+    setIsJumped(true);
+  }, [points]);
   const trainName = useMemo(() => {
     if (!data.limited) return "";
     const limitedArray = data.limited.split(":");
@@ -198,6 +221,7 @@ export const EachTrainInfoCore = ({
 
   const { height } = useWindowDimensions();
   const { isLandscape } = useDeviceOrientationChange();
+  const ScrollViewRef = useRef();
 
   const [trueTrainID, setTrueTrainID] = useState();
   useEffect(() => {
@@ -389,6 +413,7 @@ export const EachTrainInfoCore = ({
         from={from}
         styles={styles}
         actionSheetRef={actionSheetRef}
+        ScrollViewRef={ScrollViewRef}
         containerProps={{
           style: {
             maxHeight: isLandscape ? height - 94 : (height / 100) * 70,

components/DynamicHeaderScrollView.js

@@ -13,14 +13,13 @@ export const DynamicHeaderScrollView = (props) => {
     topStickyContent,
     styles,
     from,
+    ScrollViewRef,
   } = props;
   const [headerSize, setHeaderSize] = useState("default");
   useLayoutEffect(() => {
     AS.getItem("headerSize")
       .then((res) => {
-        if (res) {
-          setHeaderSize(res);
-        }
+        if (res) setHeaderSize(res);
       })
       .catch((e) => {
         AS.setItem("headerSize", "default");
@@ -160,6 +159,7 @@ export const DynamicHeaderScrollView = (props) => {
         stickyHeaderIndices={[1]}
         scrollEventThrottle={16}
         onScroll={onScroll}
+        ref={ScrollViewRef}
       >
         <View style={{ height: Scroll_Distance, flexDirection: "column" }} />
         {topStickyContent && (