構内図対応

components/ActionSheetComponents/StationDeteilView.js

@@ -8,6 +8,7 @@ import {
   Text,
   TouchableOpacity,
 } from "react-native";
+import AutoHeightImage from "react-native-auto-height-image";
 import { FontAwesome, Foundation, Ionicons } from "@expo/vector-icons";
 import ActionSheet from "react-native-actions-sheet";
 import Sign from "../../components/駅名表/Sign";
@@ -94,6 +95,13 @@ export const StationDeteilView = (props) => {
                 setFavoriteStation={setFavoriteStation}
               />
             ))}
+          {currentStation &&
+            currentStation[0].JrHpUrl &&
+            currentStation[0].StationNumber != "M12" && (
+              <駅構内図 //高松/阿波池田&後免&須崎kounai.png児島例外/
+                uri={currentStation[0].JrHpUrl.replace("/index.html", "/")}
+              />
+            )}
           {currentStation && (
             <View style={{ flexDirection: "row" }}>
               {!currentStation[0].JrHpUrl || (
@@ -291,6 +299,65 @@ const NexPreStationLine = ({
   );
 };
 
+const 駅構内図 = (props) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <TouchableOpacity
+        style={{
+          height: 50,
+          backgroundColor: "#888A85",
+          flexDirection: "column",
+          alignContent: "center",
+          alignItems: "center",
+          margin: 2,
+        }}
+        onLongPress={() => Linking.openURL(props.uri + "images/kounai.gif")}
+        onPress={() => setOpen(!open)}
+      >
+        <View style={{ flex: 1 }} />
+        <Text
+          style={{
+            color: "white",
+            textAlign: "center",
+            textAlignVertical: "center",
+            flex: 1,
+          }}
+        >
+          {open ? "駅構内図を非表示" : "駅構内図を表示"}
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+      <View>
+        {open && (
+          <>
+            <AutoHeightImage
+              source={{ uri: props.uri + "images/kounai.gif" }}
+              resizeMode="contain"
+              width={wp("100%")}
+            />
+            <AutoHeightImage
+              source={{ uri: props.uri + "images/kounai.png" }}
+              resizeMode="contain"
+              width={wp("100%")}
+            />
+            <AutoHeightImage
+              source={{ uri: props.uri + "images/kounai_1f.gif" }}
+              resizeMode="contain"
+              width={wp("100%")}
+            />
+            <AutoHeightImage
+              source={{ uri: props.uri + "images/kounai_2f.png" }}
+              resizeMode="contain"
+              width={wp("100%")}
+            />
+          </>
+        )}
+      </View>
+    </>
+  );
+};
+
 const styleSheet = {
   外枠: {
     width: wp("80%"),