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

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>
       )}
     </>
   );