コンテンツ分割、整理

components/ActionSheetComponents/EachTrainInfo.js

@@ -2,18 +2,13 @@ import React, { useEffect, useState, useRef } from "react";
 import {
   View,
   LayoutAnimation,
-  ScrollView,
   Text,
   TouchableOpacity,
   Platform,
-  Animated,
   StyleSheet,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import ActionSheet, {
-  SheetManager,
-  useScrollHandlers,
-} from "react-native-actions-sheet";
+import ActionSheet, { SheetManager } from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
 import trainList from "../../assets/originData/trainList";
 import { lineList } from "../../lib/getStationList";
@@ -25,8 +20,10 @@ import { customTrainDataDetector } from "../custom-train-data";
 import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
 import { EachStopList } from "./EachTrainInfo/EachStopList";
 import { DataFromButton } from "./EachTrainInfo/DataFromButton";
-import { TrainDataView } from "./EachTrainInfo/TrainDataView";
 import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
+import { LongHeader } from "./EachTrainInfo/LongHeader";
+import { ShortHeader } from "./EachTrainInfo/ShortHeader";
+import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
 
 export const EachTrainInfo = (props) => {
   if (!props.payload) return <></>;
@@ -379,9 +376,6 @@ export const EachTrainInfo = (props) => {
       .replace("ライナーライナー", "ライナー");
   };
   const actionSheetRef = useRef(null);
-  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
-
-  const scrollOffsetY = useRef(new Animated.Value(0)).current;
   return (
     <ActionSheet
       gestureEnabled={true}
@@ -460,108 +454,28 @@ export const EachTrainInfo = (props) => {
             from == "AllTrainDiagramView" ? (
               <></>
             ) : (
-              <ScrollView
-                //onTouchStart={() => setActionSheetHorizonalScroll(true)}
-                //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
-                //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
-                style={{
-                  flexDirection: "row",
-                  flex: 1,
-                  //width: widthPercentageToDP("200%"),
-                  // minHeight: 200,
-                  //height: heightPercentageToDP("20%"),
-                }}
-                horizontal
-                pagingEnabled
-              >
-                <TrainDataView
-                  mode={2}
-                  currentTrainData={currentTrainData}
-                  currentPosition={currentPosition}
-                  nearTrainIDList={nearTrainIDList}
-                  openTrainInfo={openTrainInfo}
-                />
-              </ScrollView>
+              <ShortHeader
+                currentTrainData={currentTrainData}
+                currentPosition={currentPosition}
+                nearTrainIDList={nearTrainIDList}
+                openTrainInfo={openTrainInfo}
+              />
             )
           }
           longHeader={
             from == "AllTrainDiagramView" ? (
               <></>
             ) : (
-              <ScrollView
-                //onTouchStart={() => setActionSheetHorizonalScroll(true)}
-                //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
-                //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
-                style={{
-                  flexDirection: "row",
-                  //width: widthPercentageToDP("200%"),
-                  // minHeight: 200,
-                  //height: heightPercentageToDP("20%"),
-                }}
-                horizontal
-                pagingEnabled
-              >
-                <TrainDataView
-                  currentTrainData={currentTrainData}
-                  currentPosition={currentPosition}
-                  nearTrainIDList={nearTrainIDList}
-                  openTrainInfo={openTrainInfo}
-                />
-              </ScrollView>
+              <LongHeader
+                currentTrainData={currentTrainData}
+                currentPosition={currentPosition}
+                nearTrainIDList={nearTrainIDList}
+                openTrainInfo={openTrainInfo}
+              />
             )
           }
           topStickyContent={
-            <View
-              style={{
-                alignItems: "center",
-                backgroundColor: "white",
-                flexDirection: "row",
-              }}
-            >
-              <View
-                style={{
-                  padding: 8,
-                  flexDirection: "row",
-                  borderBottomWidth: 1,
-                  borderBottomColor: "#f0f0f0",
-                  flex: 1,
-                }}
-              >
-                <Text style={{ fontSize: 20 }}>停車駅</Text>
-                <View style={{ flex: 1 }} />
-                <View style={{ flexDirection: "row" }}>
-                  {!isNaN(currentTrainData?.delay) &&
-                    currentTrainData?.delay != 0 && (
-                      <Text
-                        style={{
-                          fontSize: 15,
-                          color: "black",
-                          position: "absolute",
-                          right: 110,
-                          textAlign: "right",
-                          textDecorationLine: "line-through",
-                        }}
-                      >
-                        (定刻)
-                      </Text>
-                    )}
-                  <Text
-                    style={{
-                      fontSize: 20,
-                      color: isNaN(currentTrainData?.delay)
-                        ? "black"
-                        : currentTrainData?.delay == 0
-                        ? "black"
-                        : "red",
-                      width: 60,
-                    }}
-                  >
-                    見込
-                  </Text>
-                  <Text style={{ fontSize: 20, width: 50 }}></Text>
-                </View>
-              </View>
-            </View>
+            <ScrollStickyContent currentTrainData={currentTrainData} />
           }
         >
           {headStation && !isConcatNear && (

components/ActionSheetComponents/EachTrainInfo/LongHeader.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { TrainDataView } from "./TrainDataView";
+
+export const LongHeader = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
+  return (
+    <ScrollView
+      //onTouchStart={() => setActionSheetHorizonalScroll(true)}
+      //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+      //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
+      style={{
+        flexDirection: "row",
+        //width: widthPercentageToDP("200%"),
+        // minHeight: 200,
+        //height: heightPercentageToDP("20%"),
+      }}
+      horizontal
+      pagingEnabled
+    >
+      <TrainDataView
+        currentTrainData={currentTrainData}
+        currentPosition={currentPosition}
+        nearTrainIDList={nearTrainIDList}
+        openTrainInfo={openTrainInfo}
+      />
+    </ScrollView>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/ScrollStickyContent.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export const ScrollStickyContent = ({ currentTrainData }) => {
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        backgroundColor: "white",
+        flexDirection: "row",
+      }}
+    >
+      <View
+        style={{
+          padding: 8,
+          flexDirection: "row",
+          borderBottomWidth: 1,
+          borderBottomColor: "#f0f0f0",
+          flex: 1,
+        }}
+      >
+        <Text style={{ fontSize: 20 }}>停車駅</Text>
+        <View style={{ flex: 1 }} />
+        <View style={{ flexDirection: "row" }}>
+          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
+            <Text
+              style={{
+                fontSize: 15,
+                color: "black",
+                position: "absolute",
+                right: 110,
+                textAlign: "right",
+                textDecorationLine: "line-through",
+              }}
+            >
+              (定刻)
+            </Text>
+          )}
+          <Text
+            style={{
+              fontSize: 20,
+              color: isNaN(currentTrainData?.delay)
+                ? "black"
+                : currentTrainData?.delay == 0
+                ? "black"
+                : "red",
+              width: 60,
+            }}
+          >
+            見込
+          </Text>
+          <Text style={{ fontSize: 20, width: 50 }}></Text>
+        </View>
+      </View>
+    </View>
+  );
+};

components/ActionSheetComponents/EachTrainInfo/ShortHeader.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { TrainDataView } from "./TrainDataView";
+
+export const ShortHeader = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
+  return (
+    <ScrollView
+      //onTouchStart={() => setActionSheetHorizonalScroll(true)}
+      //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+      //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
+      style={{
+        flexDirection: "row",
+        flex: 1,
+        //width: widthPercentageToDP("200%"),
+        // minHeight: 200,
+        //height: heightPercentageToDP("20%"),
+      }}
+      horizontal
+      pagingEnabled
+    >
+      <TrainDataView
+        mode={2}
+        currentTrainData={currentTrainData}
+        currentPosition={currentPosition}
+        nearTrainIDList={nearTrainIDList}
+        openTrainInfo={openTrainInfo}
+      />
+    </ScrollView>
+  );
+};

components/DynamicHeaderScrollView.js

@@ -18,7 +18,7 @@ export const DynamicHeaderScrollView = (props) => {
   const Scroll_Distance = Max_Header_Height - Min_Header_Height;
 
   const animatedHeaderHeight = scrollOffsetY.interpolate({
-    inputRange: [Min_Header_Height, Scroll_Distance],
+    inputRange: [Scroll_Distance, Scroll_Distance + 10],
     outputRange: [Max_Header_Height, 0],
     extrapolate: "clamp",
   });
@@ -40,20 +40,6 @@ export const DynamicHeaderScrollView = (props) => {
   return (
     <View {...containerProps}>
       <View style={{ position: "relative" }}>
-        <Animated.View
-          style={[
-            styles.header,
-            {
-              height: Max_Header_Height,
-              backgroundColor: "#0099CC",
-              opacity: animatedHeaderVisible,
-
-              top: 0,
-            },
-          ]}
-        >
-          {longHeader}
-        </Animated.View>
         <Animated.View
           style={[
             styles.header,
@@ -68,6 +54,20 @@ export const DynamicHeaderScrollView = (props) => {
         >
           {shortHeader}
         </Animated.View>
+        <Animated.View
+          style={[
+            styles.header,
+            {
+              height: animatedHeaderHeight,
+              backgroundColor: "#0099CC",
+              opacity: animatedHeaderVisible,
+
+              top: 0,
+            },
+          ]}
+        >
+          {longHeader}
+        </Animated.View>
       </View>
       <ScrollView
         {...scrollViewProps}