列車アイコンを押したらアンパンマン列車運行情報ページが開くように変更

components/ActionSheetComponents/EachTrainInfo.js

@@ -2,9 +2,8 @@ import React, { useRef } from "react";
 import { Platform } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import { EachTrainInfoCore } from "./EachTrainInfoCore";
-export const EachTrainInfo = ({payload}) => {
+export const EachTrainInfo = ({ payload }) => {
   if (!payload) return <></>;
-
   const actionSheetRef = useRef(null);
   return (
     <ActionSheet

components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx

@@ -4,6 +4,7 @@ import { Ionicons } from "@expo/vector-icons";
 import dayjs from "dayjs";
 import { useInterval } from "../../../lib/useInterval";
 import { Icon } from "@expo/vector-icons/build/createIconSet";
+import { SheetManager } from "react-native-actions-sheet";
 
 type GlyphNames = ComponentProps<typeof Ionicons>["name"];
 
@@ -16,7 +17,7 @@ type apt = {
   name: GlyphNames;
   color: string;
 };
-export const TrainIconStatus: FC<Props> = ({ data,navigate,from }) => {
+export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
   const [trainIcon, setTrainIcon] = useState(null);
   const [anpanmanStatus, setAnpanmanStatus] = useState<apt>();
   useEffect(() => {
@@ -34,7 +35,7 @@ export const TrainIconStatus: FC<Props> = ({ data,navigate,from }) => {
       case "57D":
         setTrainIcon(
           "https://n8n.haruk.in/webhook/dosan-anpanman-pictures.png?trainNum=" +
-          data.trainNum
+            data.trainNum
         );
         fetch(
           `https://n8n.haruk.in/webhook/dosan-anpanman?month=${dayjs().format(
@@ -66,7 +67,15 @@ export const TrainIconStatus: FC<Props> = ({ data,navigate,from }) => {
   return (
     <>
       {trainIcon && (
-        <View style={{}} >
+        <TouchableOpacity
+          onPress={() => {
+            navigate("howto", {
+              info: "https://www.jr-eki.com/aptrain/index.html",
+              goTo: from,
+            });
+            SheetManager.hide("EachTrainInfo");
+          }}
+        >
           {move ? (
             <Image
               source={{ uri: trainIcon }}
@@ -76,7 +85,7 @@ export const TrainIconStatus: FC<Props> = ({ data,navigate,from }) => {
           ) : (
             <Ionicons {...anpanmanStatus} size={30} style={{ margin: 5 }} />
           )}
-        </View>
+        </TouchableOpacity>
       )}
     </>
   );

components/AllTrainDiagramView.js

@@ -60,7 +60,7 @@ export default function AllTrainDiagramView() {
       },
       navigate,
       originalStationList,
-      from: "AllTrainDiagramView",
+      from: "AllTrainIDList",
     };
     SheetManager.show("EachTrainInfo", {
       payload,

components/DynamicHeaderScrollView.js

@@ -40,7 +40,7 @@ export const DynamicHeaderScrollView = (props) => {
   }, [headerSize]);
   const viewHeader = useMemo(() => {
     switch (from) {
-      case "AllTrainDiagramView":
+      case "AllTrainIDList":
       case "NearTrainDiagramView":
       case "LED2":
         return true;

components/trainbaseview.js

@@ -37,7 +37,7 @@ export default function TrainBase({ route }) {
         setSupportMultipleWindows={false}
         onMessage={(event) => {}}
       />
-      {(from == "LED" || from == "LED2" || from == "AllTrainDiagramView") && (
+      {(from == "LED" || from == "LED2" || from == "AllTrainIDList") && (
         <TouchableOpacity
           style={{
             padding: 10,
@@ -49,7 +49,7 @@ export default function TrainBase({ route }) {
             alignItems: "center",
           }}
           onPress={() =>
-            navigate(from == "AllTrainDiagramView" ? "AllTrainIDList" : "menu")
+            navigate(from == "AllTrainIDList" ? "AllTrainIDList" : "menu")
           }
         >
           <View style={{ flex: 1 }} />