可読性を上げる変更

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   View,
   LayoutAnimation,
@@ -9,7 +9,7 @@ import {
   BackHandler,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { SheetManager, useScrollHandlers } from "react-native-actions-sheet";
+import { SheetManager } from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
 import trainList from "../../assets/originData/trainList";
 import { lineList } from "../../lib/getStationList";
@@ -50,7 +50,6 @@ export const EachTrainInfoCore = ({
   // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
 
   useEffect(() => {
-    console.log(currentTrain.length);
     if (!currentTrain.length) return;
     setCurrentTrainData(
       checkDuplicateTrainData(
@@ -80,9 +79,6 @@ export const EachTrainInfoCore = ({
   const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
   const [currentPosition, setCurrentPosition] = useState([]);
   const [trainData, setTrainData] = useState([]);
-  const scrollHandlers = actionSheetRef
-    ? useScrollHandlers("scrollview-1", actionSheetRef)
-    : null;
 
   const stationList =
     originalStationList &&
@@ -112,6 +108,28 @@ export const EachTrainInfoCore = ({
     trainPositionSwitch == "true"
       ? findReversalPoints(currentPosition, stopStationIDList)
       : [];
+  const trainName = useMemo(() => {
+    if (!data.limited) return "";
+    const limitedArray = data.limited.split(":");
+    const type = getTrainType(limitedArray[0]);
+
+    switch (true) {
+      case limitedArray[1]:
+        // 特急の場合は、列車名を取得
+        return type + migrateTrainName(limitedArray[1]);
+      case trainData.length == 0:
+        // 特急以外の場合は、列車番号を取得
+        return type;
+      default:
+        // 行先がある場合は、行先を取得
+        return (
+          type +
+          migrateTrainName(
+            trainData[trainData.length - 1].split(",")[0] + "行き"
+          )
+        );
+    }
+  }, [data.limited, trainData]);
 
   const { height, width } = useWindowDimensions();
   const { isLandscape } = useDeviceOrientationChange();
@@ -223,10 +241,6 @@ export const EachTrainInfoCore = ({
       });
     }
   };
-  const viewHeader =
-    from == "AllTrainDiagramView" ||
-    from == "NearTrainDiagramView" ||
-    from == "LED2";
   return (
     <View
       style={{
@@ -252,15 +266,7 @@ export const EachTrainInfoCore = ({
       )}
       <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
         <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
-          {data.limited
+          {trainName}
-            ? getType(data.limited.split(":")[0]) +
-              migrateTrainName(
-                data.limited.split(":")[1] ||
-                  (trainData.length > 0
-                    ? trainData[trainData.length - 1].split(",")[0] + "行き"
-                    : " ")
-              )
-            : ""}
         </Text>
         <View style={{ flex: 1 }} />
         <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
@@ -289,40 +295,31 @@ export const EachTrainInfoCore = ({
           )}
       </View>
       <DynamicHeaderScrollView
+        from={from}
         styles={styles}
-        scrollViewProps={scrollHandlers}
+        actionSheetRef={actionSheetRef}
         containerProps={{
           style: {
             maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
           },
         }}
-        Max_Header_Height={viewHeader ? 0 : 200}
-        Min_Header_Height={viewHeader ? 0 : 80}
         shortHeader={
-          viewHeader ? (
+          <ShortHeader
-            <></>
+            currentTrainData={currentTrainData}
-          ) : (
+            currentPosition={currentPosition}
-            <ShortHeader
+            nearTrainIDList={nearTrainIDList}
-              currentTrainData={currentTrainData}
+            openTrainInfo={openTrainInfo}
-              currentPosition={currentPosition}
+            navigate={navigate}
-              nearTrainIDList={nearTrainIDList}
+          />
-              openTrainInfo={openTrainInfo}
-              navigate={navigate}
-            />
-          )
         }
         longHeader={
-          viewHeader ? (
+          <LongHeader
-            <></>
+            currentTrainData={currentTrainData}
-          ) : (
+            currentPosition={currentPosition}
-            <LongHeader
+            nearTrainIDList={nearTrainIDList}
-              currentTrainData={currentTrainData}
+            openTrainInfo={openTrainInfo}
-              currentPosition={currentPosition}
+            navigate={navigate}
-              nearTrainIDList={nearTrainIDList}
+          />
-              openTrainInfo={openTrainInfo}
-              navigate={navigate}
-            />
-          )
         }
         topStickyContent={
           <ScrollStickyContent currentTrainData={currentTrainData} />

components/DynamicHeaderScrollView.js

@@ -1,20 +1,39 @@
 import { ScrollView, View, Animated, LayoutAnimation } from "react-native";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
+import { useScrollHandlers } from "react-native-actions-sheet";
 
 export const DynamicHeaderScrollView = (props) => {
   const {
-    Max_Header_Height = 200,
-    Min_Header_Height = 80,
     children,
-    scrollViewProps = {},
+    actionSheetRef = {},
     containerProps = {},
     shortHeader = <></>,
     longHeader = <></>,
     topStickyContent,
     styles,
+    from,
   } = props;
 
+  const viewHeader = useMemo(() => {
+    switch (from) {
+      case "AllTrainDiagramView":
+      case "NearTrainDiagramView":
+      case "LED2":
+        return true;
+      default:
+        return false;
+    }
+  }, [from]);
+
+  const Max_Header_Height = viewHeader ? 0 : 200;
+  const Min_Header_Height = viewHeader ? 0 : 80;
+
   const Scroll_Distance = Max_Header_Height - Min_Header_Height;
+
+  const scrollHandlers = actionSheetRef
+    ? useScrollHandlers("scrollview-1", actionSheetRef)
+    : null;
+
   const shotHeaderStyle = {
     on: {
       height: Min_Header_Height,
@@ -86,7 +105,7 @@ export const DynamicHeaderScrollView = (props) => {
             headerVisible ? shotHeaderStyle.on : shotHeaderStyle.off,
           ]}
         >
-          {shortHeader}
+          {viewHeader ? <></> : shortHeader}
         </Animated.View>
         <Animated.View
           style={[
@@ -94,14 +113,14 @@ export const DynamicHeaderScrollView = (props) => {
             headerVisible ? longHeaderStyle.off : longHeaderStyle.on,
           ]}
         >
-          {longHeader}
+          {viewHeader ? <></> : longHeader}
         </Animated.View>
         <Animated.View style={headerVisible ? StickyStyle.off : StickyStyle.on}>
           {topStickyContent}
         </Animated.View>
       </View>
       <ScrollView
-        {...scrollViewProps}
+        {...scrollHandlers}
         style={{ backgroundColor: "white", zIndex: 0 }}
         stickyHeaderIndices={[1]}
         scrollEventThrottle={16}