SpecialTrainInfoを分岐

components/ActionSheetComponents/EachTrainInfo/ShowSpecialTrain.js

@@ -0,0 +1,36 @@
+import { Text, TouchableOpacity } from "react-native";
+import React, { useState } from "react";
+export const ShowSpecialTrain = ({
+  isTrainDataNothing,
+  setTrainData,
+  trainList,
+  trueTrainID,
+}) => {
+  const replaceSpecialTrainDetail = (trainNum) => {
+    let TD = trainList[trainNum];
+    if (!TD) return;
+    setTrainData(TD.split("#").filter((d) => d != ""));
+  };
+  return (
+    <>
+      {isTrainDataNothing && trueTrainID && (
+        <TouchableOpacity
+          onPress={() => replaceSpecialTrainDetail(trueTrainID)}
+          style={{
+            padding: 10,
+            flexDirection: "row",
+            borderColor: "blue",
+            borderWidth: 1,
+            margin: 10,
+            borderRadius: 5,
+            alignItems: "center",
+          }}
+        >
+          <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
+            本来の列車情報を表示
+          </Text>
+        </TouchableOpacity>
+      )}
+    </>
+  );
+};

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -31,6 +31,7 @@ import { migrateTrainName } from "../../lib/eachTrainInfoCoreLib/migrateTrainNam
 import { getType } from "../../lib/eachTrainInfoCoreLib/getType";
 import { searchSpecialTrain } from "../../lib/eachTrainInfoCoreLib/searchSpecialTrain";
 import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainInfo";
+import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
 
 export const EachTrainInfoCore = ({
   actionSheetRef,
@@ -69,7 +70,6 @@ export const EachTrainInfoCore = ({
     );
     return () => backHandler.remove();
   }, []);
-  //bconst insets = useSafeAreaInsets();
 
   const [headStation, setHeadStation] = useState([]);
   const [tailStation, setTailStation] = useState([]);
@@ -184,12 +184,6 @@ export const EachTrainInfoCore = ({
     }
   }, [currentTrainData]);
 
-  const replaceSpecialTrainDetail = (trainNum) => {
-    let TD = trainList[trainNum];
-    if (!TD) return;
-    setTrainData(TD.split("#").filter((d) => d != ""));
-  };
-
   useEffect(() => {
     //列車現在地アイコン表示スイッチ
     AS.getItem("trainPositionSwitch")
@@ -229,6 +223,10 @@ export const EachTrainInfoCore = ({
       });
     }
   };
+  const viewHeader =
+    from == "AllTrainDiagramView" ||
+    from == "NearTrainDiagramView" ||
+    from == "LED2";
   return (
     <View
       style={{
@@ -298,24 +296,10 @@ export const EachTrainInfoCore = ({
             maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
           },
         }}
-        Max_Header_Height={
+        Max_Header_Height={viewHeader ? 0 : 200}
-          from == "AllTrainDiagramView" ||
+        Min_Header_Height={viewHeader ? 0 : 80}
-          from == "NearTrainDiagramView" ||
-          from == "LED2"
-            ? 0
-            : 200
-        }
-        Min_Header_Height={
-          from == "AllTrainDiagramView" ||
-          from == "NearTrainDiagramView" ||
-          from == "LED2"
-            ? 0
-            : 80
-        }
         shortHeader={
-          from == "AllTrainDiagramView" ||
+          viewHeader ? (
-          from == "NearTrainDiagramView" ||
-          from == "LED2" ? (
             <></>
           ) : (
             <ShortHeader
@@ -328,7 +312,7 @@ export const EachTrainInfoCore = ({
           )
         }
         longHeader={
-          from == "AllTrainDiagramView" || from == "NearTrainDiagramView" ? (
+          viewHeader ? (
             <></>
           ) : (
             <LongHeader
@@ -374,31 +358,12 @@ export const EachTrainInfoCore = ({
               <></>
             )
           )}
-        {/* <LottieView
+        <ShowSpecialTrain
-                autoPlay
+          isTrainDataNothing={trainData.length == 0}
-                loop
+          setTrainData={setTrainData}
-                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+          trainList={trainList}
-                source={require("../../assets/51690-loading-diamonds.json")}
+          trueTrainID={trueTrainID}
         />
-              <Text>ほげほげふがふが</Text> */}
-        {trainData.length == 0 && trueTrainID && (
-          <TouchableOpacity
-            onPress={() => replaceSpecialTrainDetail(trueTrainID)}
-            style={{
-              padding: 10,
-              flexDirection: "row",
-              borderColor: "blue",
-              borderWidth: 1,
-              margin: 10,
-              borderRadius: 5,
-              alignItems: "center",
-            }}
-          >
-            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
-              本来の列車情報を表示
-            </Text>
-          </TouchableOpacity>
-        )}
         {trainData.map((i, index) =>
           i.split(",")[1] == "提" ? (
             <DataFromButton i={i} />

components/DynamicHeaderScrollView.js

@@ -15,8 +15,6 @@ export const DynamicHeaderScrollView = (props) => {
   } = props;
 
   const Scroll_Distance = Max_Header_Height - Min_Header_Height;
-
-  const [headerVisible, setHeaderVisible] = useState(false);
   const shotHeaderStyle = {
     on: {
       height: Min_Header_Height,
@@ -67,6 +65,18 @@ export const DynamicHeaderScrollView = (props) => {
     },
   };
 
+  const [headerVisible, setHeaderVisible] = useState(false);
+
+  const onScroll = (event) => {
+    const scrollY = event.nativeEvent.contentOffset.y;
+    if (Scroll_Distance < scrollY == headerVisible) return;
+    LayoutAnimation.configureNext({
+      duration: 100,
+      update: { type: "easeOut" },
+    });
+    setHeaderVisible(Scroll_Distance < scrollY);
+  };
+
   return (
     <View {...containerProps}>
       <View style={{ zIndex: 1 }}>
@@ -92,27 +102,12 @@ export const DynamicHeaderScrollView = (props) => {
       </View>
       <ScrollView
         {...scrollViewProps}
-        style={{
+        style={{ backgroundColor: "white", zIndex: 0 }}
-          backgroundColor: "white",
-          zIndex: 0,
-        }}
         stickyHeaderIndices={[1]}
         scrollEventThrottle={16}
-        onScroll={(event) => {
+        onScroll={onScroll}
-          const scrollY = event.nativeEvent.contentOffset.y;
-          LayoutAnimation.configureNext({
-            duration: 100,
-            update: { type: "easeOut" },
-          });
-          setHeaderVisible(Scroll_Distance < scrollY);
-        }}
       >
-        <View
+        <View style={{ height: Scroll_Distance, flexDirection: "column" }} />
-          style={{
-            height: Scroll_Distance,
-            flexDirection: "column",
-          }}
-        />
         {topStickyContent && (
           <View
             style={{