地図表示の挙動変更、位置情報への移動ボタンを実装

components/ActionSheetComponents/StationDeteilView/StationInsideMapButton.tsx

@@ -19,6 +19,7 @@ export const 駅構内図:FC<Props> = (props) => {
         alignContent: "center",
         alignItems: "center",
         margin: 2,
+        flex: 1,
       }}
       onPress={() => {
         navigate("howto", { info, goTo, useShow });

components/ActionSheetComponents/StationDeteilView/StationTrainPositionButton.tsx

@@ -0,0 +1,54 @@
+import { FC } from "react";
+import { TouchableOpacity, View, Text, Linking } from "react-native";
+import { useStationList } from "@/stateBox/useStationList";
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import AntDesign from "react-native-vector-icons/AntDesign";
+type Props = {
+  stationNumber: string;
+  onExit: () => void;
+  navigate?: (screen: string, params: { screen: string }) => void;
+};
+export const StationTrainPositionButton: FC<Props> = (props) => {
+  const { stationNumber, onExit, navigate } = props;
+  const {
+    inject,
+  } = useCurrentTrain();
+  const { getInjectJavascriptAddress } = useStationList();
+  return (
+    <TouchableOpacity
+      style={{
+        height: 50,
+        backgroundColor: "#0099CC",
+        flexDirection: "row",
+        alignContent: "center",
+        alignItems: "center",
+        margin: 2,
+        flex: 1
+      }}
+      onPress={() => {
+        navigate("positions", { screen: "Apps" });
+        const script = getInjectJavascriptAddress(stationNumber);
+        inject(script);
+        onExit();
+      }}
+    >
+      <View style={{ flex: 1 }} />
+      <AntDesign
+        name={"barchart"}
+        size={20}
+        color={"white"}
+        style={{ marginHorizontal: 5, marginVertical: 5 }}
+      />
+      <Text
+        style={{
+          color: "white",
+          textAlign: "center",
+          textAlignVertical: "center",
+        }}
+      >
+        走行位置に移動
+      </Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};