EachTrainInfoの可変を実装

components/ActionSheetComponents/EachTrainInfo.js

@@ -6,6 +6,7 @@ import {
   Text,
   TouchableOpacity,
   Platform,
+  Animated,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import ActionSheet, {
@@ -24,6 +25,7 @@ import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
 import { EachStopList } from "./EachTrainInfo/EachStopList";
 import { DataFromButton } from "./EachTrainInfo/DataFromButton";
 import { TrainDataView } from "./EachTrainInfo/TrainDataView";
+import { DynamicHeader } from "./EachTrainInfo/DynamicHeader";
 
 export const EachTrainInfo = (props) => {
   if (!props.payload) return <></>;
@@ -377,6 +379,8 @@ export const EachTrainInfo = (props) => {
   };
   const actionSheetRef = useRef(null);
   const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
+
+  const scrollOffsetY = useRef(new Animated.Value(0)).current;
   return (
     <ActionSheet
       gestureEnabled={true}
@@ -446,118 +450,28 @@ export const EachTrainInfo = (props) => {
               />
             )}
         </View>
+        <View style={{ maxHeight: heightPercentageToDP("70%") }}>
           {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
+            <DynamicHeader
+              animHeaderValue={scrollOffsetY}
               currentTrainData={currentTrainData}
               currentPosition={currentPosition}
               nearTrainIDList={nearTrainIDList}
               openTrainInfo={openTrainInfo}
             />
-            {/* <View
-              style={{
-                flexDirection: "column",
-                height: heightPercentageToDP("20%"),
-                flex: 1,
-                width: widthPercentageToDP("100%"),
-              }}
-            >
-              <View style={{ flex: 1, flexDirection: "row" }}>
-                <View
-                  style={{
-                    flex: 1,
-                    backgroundColor: "white",
-                    borderRadius: 10,
-                    padding: 10,
-                    margin: 10,
-                  }}
-                >
-                  <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
-                  <View style={{ flex: 1 }} />
-                  <Text
-                    style={{
-                      fontSize: 20,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    岡山
-                  </Text>
-                </View>
-
-                <View
-                  style={{
-                    flex: 3,
-                    backgroundColor: "white",
-                    borderRadius: 10,
-                    padding: 10,
-                    margin: 10,
-                  }}
-                >
-                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                    車両案内
-                  </Text>
-                  <View style={{ flex: 1 }} />
-                  <Text
-                    style={{
-                      fontSize: 20,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    宇多津でうずしお号と連結
-                  </Text>
-                </View>
-              </View>
-              <View style={{ flex: 1, flexDirection: "row" }}>
-                <View
-                  style={{
-                    flex: 1,
-                    backgroundColor: "white",
-                    borderRadius: 10,
-                    padding: 10,
-                    margin: 10,
-                  }}
-                >
-                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                    編成(使用車両：2700系)
-                  </Text>
-                  <View style={{ flex: 1 }} />
-                  <Text
-                    style={{
-                      fontSize: 20,
-                      color: "#0099CC",
-                      textAlign: "left",
-                    }}
-                  >
-                    {"[<自][自>][アン自|指>][アン指|G>]"}
-                  </Text>
-                </View>
-              </View>
-            </View> */}
-          </ScrollView>
           )}
+
           <ScrollView
             {...scrollHandlers}
             style={{
-            maxHeight: heightPercentageToDP(
-              from == "AllTrainDiagramView" ? "70%" : "50%"
-            ),
               backgroundColor: "white",
             }}
             stickyHeaderIndices={[0]}
+            scrollEventThrottle={16}
+            onScroll={Animated.event(
+              [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
+              { useNativeDriver: false }
+            )}
           >
             <View
               style={{
@@ -649,7 +563,9 @@ export const EachTrainInfo = (props) => {
                   stationList={stationList}
                   points={points}
                   currentTrainData={currentTrainData}
-                openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+                  openStationACFromEachTrainInfo={
+                    openStationACFromEachTrainInfo
+                  }
                 />
               )
             )}
@@ -690,6 +606,7 @@ export const EachTrainInfo = (props) => {
             </View>
           </ScrollView>
         </View>
+      </View>
     </ActionSheet>
   );
 };

components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js

@@ -0,0 +1,274 @@
+import * as React from "react";
+import { Text, View, StyleSheet, Animated, ScrollView } from "react-native";
+import { TrainDataView } from "./TrainDataView";
+
+const Max_Header_Height = 200;
+const Min_Header_Height = 80;
+const Scroll_Distance = Max_Header_Height - Min_Header_Height;
+export const DynamicHeader = ({
+  animHeaderValue,
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
+  const animatedHeaderHeight = animHeaderValue.interpolate({
+    inputRange: [0, Scroll_Distance],
+    outputRange: [Max_Header_Height, 0],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderHeight2 = animHeaderValue.interpolate({
+    inputRange: [0, Scroll_Distance],
+    outputRange: [0, Min_Header_Height],
+    extrapolate: "clamp",
+  });
+  const animateHeaderBackgroundColor = animHeaderValue.interpolate({
+    inputRange: [0, Max_Header_Height - Min_Header_Height],
+    outputRange: ["blue", "red"],
+    extrapolate: "clamp",
+  });
+  return (
+    <>
+      <Animated.View
+        style={[
+          styles.header,
+          {
+            height: animatedHeaderHeight,
+            // backgroundColor: animateHeaderBackgroundColor,
+          },
+        ]}
+      >
+        <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}
+          />
+          {/* <View
+              style={{
+                flexDirection: "column",
+                height: heightPercentageToDP("20%"),
+                flex: 1,
+                width: widthPercentageToDP("100%"),
+              }}
+            >
+              <View style={{ flex: 1, flexDirection: "row" }}>
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    岡山
+                  </Text>
+                </View>
+
+                <View
+                  style={{
+                    flex: 3,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                    車両案内
+                  </Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    宇多津でうずしお号と連結
+                  </Text>
+                </View>
+              </View>
+              <View style={{ flex: 1, flexDirection: "row" }}>
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                    編成(使用車両：2700系)
+                  </Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "left",
+                    }}
+                  >
+                    {"[<自][自>][アン自|指>][アン指|G>]"}
+                  </Text>
+                </View>
+              </View>
+            </View> */}
+        </ScrollView>
+      </Animated.View>
+      <Animated.View
+        style={[
+          styles.header,
+          {
+            height: animatedHeaderHeight2,
+            //backgroundColor: animateHeaderBackgroundColor,
+            margin: 0,
+          },
+        ]}
+      >
+        <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}
+          />
+          {/* <View
+              style={{
+                flexDirection: "column",
+                height: heightPercentageToDP("20%"),
+                flex: 1,
+                width: widthPercentageToDP("100%"),
+              }}
+            >
+              <View style={{ flex: 1, flexDirection: "row" }}>
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    岡山
+                  </Text>
+                </View>
+
+                <View
+                  style={{
+                    flex: 3,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                    車両案内
+                  </Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    宇多津でうずしお号と連結
+                  </Text>
+                </View>
+              </View>
+              <View style={{ flex: 1, flexDirection: "row" }}>
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
+                    編成(使用車両：2700系)
+                  </Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "#0099CC",
+                      textAlign: "left",
+                    }}
+                  >
+                    {"[<自][自>][アン自|指>][アン指|G>]"}
+                  </Text>
+                </View>
+              </View>
+            </View> */}
+        </ScrollView>
+      </Animated.View>
+    </>
+  );
+};
+const styles = StyleSheet.create({
+  header: {
+    justifyContent: "center",
+    alignItems: "center",
+    left: 0,
+    right: 0,
+    //paddingTop: 10,
+  },
+  headerText: {
+    color: "#fff",
+    fontSize: 25,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+});

components/ActionSheetComponents/EachTrainInfo/StateBox.js

@@ -1,19 +1,29 @@
 import React from "react";
 import { View, Text } from "react-native";
 
-export const StateBox = ({ text, title, style }) => (
-  <View style={{ ...boxStyle, ...style }}>
+export const StateBox = ({ text, title, style, mode }) => (
+  <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
     <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
     <View style={{ flex: 1 }} />
-    <View style={{ fontSize: 25, color: "#0099CC", textAlign: "right" }}>
+    <View
+      style={{
+        color: "#0099CC",
+        textAlign: "right",
+        flexDirection: mode == 2 ? "row" : "column",
+      }}
+    >
       {text?.match("～") ? (
         <>
-          <Text style={boxTextStyle}>{text.split("～")[0]}</Text>
+          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
+            {text.split("～")[0]}
+          </Text>
           <Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
-          <Text style={boxTextStyle}>{text.split("～")[1]}</Text>
+          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
+            {text.split("～")[1]}
+          </Text>
         </>
       ) : (
-        <Text style={boxTextStyle}>{text}</Text>
+        <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
       )}
     </View>
   </View>
@@ -25,6 +35,19 @@ const boxStyle = {
   padding: 10,
   margin: 10,
 };
+const boxStyle2 = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 5,
+  margin: 5,
+};
+const boxTextStyle2 = {
+  fontSize: 18,
+  color: "#0099CC",
+  textAlign: "right",
+};
+
 const boxTextStyle = {
   fontSize: 25,
   color: "#0099CC",

components/ActionSheetComponents/EachTrainInfo/TrainDataView.js

@@ -11,17 +11,20 @@ export const TrainDataView = ({
   currentPosition,
   nearTrainIDList,
   openTrainInfo,
+  mode = 0,
 }) => {
   return (
     <View
       style={{
         flexDirection: "row",
-        minHeight: 200,
-        height: heightPercentageToDP("20%"),
+        //minHeight: 200,
+        //height: heightPercentageToDP("20%"),
         width: widthPercentageToDP("100%"),
+        flex: 1,
       }}
     >
       <StateBox
+        mode={mode}
         title={`現在地 ${currentPosition.toString()}`}
         text={
           currentTrainData?.Pos.match("～")
@@ -37,9 +40,10 @@ export const TrainDataView = ({
             : currentTrainData?.Pos
         }
       />
-      <View style={{ flex: 1, flexDirection: "column" }}>
+      <View style={{ flex: 1, flexDirection: mode == 2 ? "row" : "column" }}>
         <View style={{ flex: 1, flexDirection: "row" }}>
           <StateBox
+            mode={mode}
             title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
             text={`${currentTrainData?.delay}${
               isNaN(currentTrainData?.delay) ? "" : "分"
@@ -55,9 +59,10 @@ export const TrainDataView = ({
           }}
         >
           {nearTrainIDList.length == 0 ? (
-            <StateBox title="列番" text={currentTrainData?.num} />
+            <StateBox mode={mode} title="列番" text={currentTrainData?.num} />
           ) : (
             <StateBox
+              mode={mode}
               title="増解結相手を表示▶️"
               text={`${nearTrainIDList}`}
               style={{