ファイルの分離、整理

MenuPage.js

@@ -73,7 +73,7 @@ export function MenuPage() {
       <Stack.Screen
         name="howto"
         options={optionData}
-        children={(props) => <HowTo {...props} />}
+        component={HowTo}
       />
     </Stack.Navigator>
   );

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react";
 import {
   View,
-  LayoutAnimation,
   Text,
   TouchableOpacity,
   StyleSheet,
@@ -9,7 +8,6 @@ import {
   BackHandler,
   Linking,
 } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
 import { SheetManager } from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
 import trainList from "../../assets/originData/trainList";
@@ -33,8 +31,8 @@ import { getType } from "../../lib/eachTrainInfoCoreLib/getType";
 import { searchSpecialTrain } from "../../lib/eachTrainInfoCoreLib/searchSpecialTrain";
 import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainInfo";
 import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
-import { TrainIconStatus } from "./EachTrainInfo/trainIconStatus";
 import { useTrainMenu } from "../../stateBox/useTrainMenu";
+import { HeaderText } from "./EachTrainInfoCore/HeaderText";
 
 export const EachTrainInfoCore = ({
   actionSheetRef,
@@ -45,10 +43,7 @@ export const EachTrainInfoCore = ({
 }) => {
   // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
   const { currentTrain } = useCurrentTrain();
-  const {
+  const { setTrainInfo, originalStationList } = useTrainMenu();
-    setTrainInfo,
-    originalStationList,
-  } = useTrainMenu();
   const [currentTrainData, setCurrentTrainData] = useState();
 
   // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
@@ -84,7 +79,6 @@ export const EachTrainInfoCore = ({
   const [currentPosition, setCurrentPosition] = useState([]);
   const [trainData, setTrainData] = useState([]);
 
-
   const stationList =
     originalStationList &&
     lineList.map((d) =>
@@ -283,37 +277,17 @@ export const EachTrainInfoCore = ({
           />
         </View>
       )}
-      <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
+      <HeaderText
-        <TrainIconStatus trainData={data} />
+        data={data}
-        <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+        trainData={trainData}
-          {trainName}
+        showHeadStation={showHeadStation}
-        </Text>
+        showTailStation={showTailStation}
-        <View style={{ flex: 1 }} />
+        headStation={headStation}
-        <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+        tailStation={tailStation}
-          {showHeadStation.map((d) => `${headStation[d].id} + `)}
+        navigate={navigate}
-          {data.trainNum}
+        from={from}
-          {showTailStation.map((d) => ` + ${tailStation[d].id}`)}
-        </Text>
-
-        {data.limited != undefined &&
-          getType(data.limited.split(":")[0]) &&
-          !data.limited.split(":")[1].match("サンポート") && (
-            <Ionicons
-              name="subway"
-              color="white"
-              size={30}
-              style={{ margin: 5 }}
-              onPress={() => {
-                LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
-                navigate("trainbase", {
-                  info: "train.html?tn=" + data.trainNum,
-                  from,
-                });
-                SheetManager.hide("EachTrainInfo");
-              }}
       />
-          )}
+
-      </View>
       <DynamicHeaderScrollView
         from={from}
         styles={styles}

components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

@@ -0,0 +1,73 @@
+import React, { CSSProperties, FC, useEffect, useMemo, useState } from "react";
+import { Text, View, LayoutAnimation, TextStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { SheetManager } from "react-native-actions-sheet";
+import { getType } from "../../../lib/eachTrainInfoCoreLib/getType";
+import { migrateTrainName } from "../../../lib/eachTrainInfoCoreLib/migrateTrainName";
+import { TrainIconStatus } from "./trainIconStatus";
+import { TrainViewIcon } from "./trainViewIcon";
+
+type Props = {
+  data: { trainNum: string; limited: string };
+  trainData: string[];
+  showHeadStation: number[];
+  showTailStation: number[];
+  headStation: { id: string }[];
+  tailStation: { id: string }[];
+  navigate: any;
+  from: string;
+};
+
+const textConfig: TextStyle = {
+  fontSize: 20,
+  fontWeight: "bold",
+  color: "white",
+};
+
+export const HeaderText: FC<Props> = ({
+  data,
+  trainData,
+  showHeadStation,
+  showTailStation,
+  headStation,
+  tailStation,
+  navigate,
+  from,
+}) => {
+  const trainName = useMemo(() => {
+    if (!data.limited) return "";
+    const limitedArray = data.limited.split(":");
+    const type = getType(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]);
+  return (
+    <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
+      <TrainIconStatus {...{ data, navigate, from }}/>
+      <Text style={textConfig}>{trainName}</Text>
+      <View style={{ flex: 1 }} />
+      <Text style={textConfig}>
+        {showHeadStation.map((d) => `${headStation[d].id} + `)}
+        {data.trainNum}
+        {showTailStation.map((d) => ` + ${tailStation[d].id}`)}
+      </Text>
+
+      <TrainViewIcon {...{ data, navigate, from }} />
+    </View>
+  );
+};

components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx

@@ -1,27 +1,27 @@
 import React, { ComponentProps, FC, useEffect, useState } from "react";
-import { View, Image } from "react-native";
+import { View, Image, TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import dayjs from "dayjs";
 import { useInterval } from "../../../lib/useInterval";
 import { Icon } from "@expo/vector-icons/build/createIconSet";
 
 type GlyphNames = ComponentProps<typeof Ionicons>["name"];
+
 type Props = {
-  trainData: {
+  data: { trainNum: string; limited: string };
-    trainNum: string;
+  navigate: any;
-    limited: string;
+  from: string;
-  };
 };
 type apt = {
   name: GlyphNames;
   color: string;
 };
-export const TrainIconStatus: FC<Props> = ({ trainData }) => {
+export const TrainIconStatus: FC<Props> = ({ data,navigate,from }) => {
   const [trainIcon, setTrainIcon] = useState(null);
   const [anpanmanStatus, setAnpanmanStatus] = useState<apt>();
   useEffect(() => {
-    if (!trainData.trainNum) return;
+    if (!data.trainNum) return;
-    switch (trainData.trainNum) {
+    switch (data.trainNum) {
       case "32D":
       case "36D":
       case "44D":
@@ -34,12 +34,12 @@ export const TrainIconStatus: FC<Props> = ({ trainData }) => {
       case "57D":
         setTrainIcon(
           "https://n8n.haruk.in/webhook/dosan-anpanman-pictures.png?trainNum=" +
-            trainData.trainNum
+          data.trainNum
         );
         fetch(
           `https://n8n.haruk.in/webhook/dosan-anpanman?month=${dayjs().format(
             "M"
-          )}&day=${dayjs().format("D")}&trainNum=${trainData.trainNum}`
+          )}&day=${dayjs().format("D")}&trainNum=${data.trainNum}`
         )
           .then((d) => d.json())
           .then((d) => {
@@ -53,7 +53,7 @@ export const TrainIconStatus: FC<Props> = ({ trainData }) => {
           });
         break;
     }
-  }, [trainData.trainNum]);
+  }, [data.trainNum]);
   const [move, setMove] = useState(true);
   useInterval(
     () => {
@@ -66,7 +66,7 @@ export const TrainIconStatus: FC<Props> = ({ trainData }) => {
   return (
     <>
       {trainIcon && (
-        <View style={{}}>
+        <View style={{}} >
           {move ? (
             <Image
               source={{ uri: trainIcon }}

components/ActionSheetComponents/EachTrainInfoCore/trainViewIcon.tsx

@@ -0,0 +1,41 @@
+import React, { FC, useEffect, useState } from "react";
+import { Ionicons } from "@expo/vector-icons";
+import { LayoutAnimation } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
+import { getType } from "../../../lib/eachTrainInfoCoreLib/getType";
+
+type Props = {
+  data: { trainNum: string; limited: string };
+  navigate: any;
+  from: string;
+};
+export const TrainViewIcon: FC<Props> = ({ data, navigate, from }) => {
+  const [isTrainView, setIsTrainView] = useState(false);
+  //トレインビュー表示対象(特急、マリン)かを判定
+  useEffect(() => {
+    if (!data.limited) return;
+    setIsTrainView(
+      getType(data.limited.split(":")[0]) &&
+        !data.limited.split(":")[1].match("サンポート")
+    );
+  }, [data.limited]);
+  const onPressTrainView = () => {
+    LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
+    navigate("trainbase", {
+      info: "train.html?tn=" + data.trainNum,
+      from,
+    });
+    SheetManager.hide("EachTrainInfo");
+  };
+  return isTrainView ? (
+    <Ionicons
+      name="subway"
+      color="white"
+      size={30}
+      style={{ margin: 5 }}
+      onPress={onPressTrainView}
+    />
+  ) : (
+    <></>
+  );
+};