挙動修正

components/ActionSheetComponents/EachTrainInfo.js

@@ -460,19 +460,32 @@ export const EachTrainInfo = (props) => {
               openTrainInfo={openTrainInfo}
             />
           )}
-
           <ScrollView
             {...scrollHandlers}
             style={{
               backgroundColor: "white",
             }}
-            stickyHeaderIndices={[0]}
+            stickyHeaderIndices={[1]}
             scrollEventThrottle={16}
             onScroll={Animated.event(
               [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
               { useNativeDriver: false }
             )}
           >
+            <View
+              style={{
+                height: from == "AllTrainDiagramView" ? 0 : 120,
+                flexDirection: "column",
+              }}
+            />
+            <View
+              style={{
+                height: from == "AllTrainDiagramView" ? "auto" : 120,
+                flexDirection: "column",
+              }}
+              index={1}
+            >
+              <View style={{ flex: 1 }} />
               <View
                 style={{
                   alignItems: "center",
@@ -525,6 +538,8 @@ export const EachTrainInfo = (props) => {
                   </View>
                 </View>
               </View>
+            </View>
+
             {headStation && !isConcatNear && (
               <TouchableOpacity
                 onPress={() => openBackTrainInfo(headStation)}

components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { Text, View, StyleSheet, Animated, ScrollView } from "react-native";
 import { TrainDataView } from "./TrainDataView";
+import {
+  heightPercentageToDP,
+  widthPercentageToDP,
+} from "react-native-responsive-screen";
 
 const Max_Header_Height = 200;
 const Min_Header_Height = 80;
@@ -13,28 +17,36 @@ export const DynamicHeader = ({
   openTrainInfo,
 }) => {
   const animatedHeaderHeight = animHeaderValue.interpolate({
-    inputRange: [0, Scroll_Distance],
+    inputRange: [Min_Header_Height, Scroll_Distance],
     outputRange: [Max_Header_Height, 0],
     extrapolate: "clamp",
   });
   const animatedHeaderHeight2 = animHeaderValue.interpolate({
     inputRange: [0, Scroll_Distance],
-    outputRange: [0, Min_Header_Height],
+    outputRange: [Max_Header_Height, Min_Header_Height],
     extrapolate: "clamp",
   });
-  const animateHeaderBackgroundColor = animHeaderValue.interpolate({
+  const animatedHeaderVisible = animHeaderValue.interpolate({
-    inputRange: [0, Max_Header_Height - Min_Header_Height],
+    inputRange: [Min_Header_Height, Scroll_Distance],
-    outputRange: ["blue", "red"],
+    outputRange: [1, 0],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderVisible2 = animHeaderValue.interpolate({
+    inputRange: [Min_Header_Height, Scroll_Distance],
+    outputRange: [0, 1],
     extrapolate: "clamp",
   });
   return (
-    <>
+    <View style={{ position: "relative" }}>
       <Animated.View
         style={[
           styles.header,
           {
-            height: animatedHeaderHeight,
+            height: 200,
-            // backgroundColor: animateHeaderBackgroundColor,
+            backgroundColor: "#0099CC",
+            opacity: animatedHeaderVisible,
+
+            top: 0,
           },
         ]}
       >
@@ -145,8 +157,10 @@ export const DynamicHeader = ({
           styles.header,
           {
             height: animatedHeaderHeight2,
-            //backgroundColor: animateHeaderBackgroundColor,
+            backgroundColor: "#0099CC",
             margin: 0,
+            top: 0,
+            opacity: animatedHeaderVisible2,
           },
         ]}
       >
@@ -254,7 +268,7 @@ export const DynamicHeader = ({
             </View> */}
         </ScrollView>
       </Animated.View>
-    </>
+    </View>
   );
 };
 const styles = StyleSheet.create({
@@ -264,6 +278,9 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     //paddingTop: 10,
+    position: "absolute",
+    zIndex: 1,
+    backgroundColor: "f0f0f0",
   },
   headerText: {
     color: "#fff",