駅名標に住所の表示を開始

components/駅名表/AddressText.tsx

@@ -0,0 +1,38 @@
+import React, { FC, useEffect } from "react";
+import { Text } from "react-native";
+type Props = {
+  currentStation: any[];
+  isMatsuyama: boolean;
+};
+export const AddressText: FC<Props> = (props) => {
+  const { currentStation, isMatsuyama } = props;
+  const [stationAddress, setStationAddress] = React.useState("");
+  useEffect(() => {
+    if (!!currentStation[0].jslodApi) {
+      fetch(`${currentStation[0].jslodApi}.json`)
+        .then((response) => response.json())
+        .then((data) => {
+          const c =
+            data[currentStation[0].jslodApi][
+              "http://dbpedia.org/ontology/address"
+            ][0]["value"];
+          setStationAddress(c);
+        });
+    }
+  }, [currentStation]);
+  return (
+    <Text
+      style={{
+        fontSize: parseInt("10%"),
+        color: isMatsuyama ? "white" : "#005170",
+        position: "absolute",
+        bottom: isMatsuyama ? "25.5%" : "0%",
+        textAlign: "center",
+        width: "100%",
+        fontWeight: "bold",
+      }}
+    >
+      {stationAddress}
+    </Text>
+  );
+};

components/駅名表/Sign.js

@@ -11,6 +11,7 @@ import { StationNameArea } from "./StationNameArea";
 import { StationNumberMaker } from "./StationNumberMaker";
 import { NextPreStationLine } from "./NextPreStationLine";
 import { LottieDelayView } from "./LottieDelayView";
+import { AddressText } from "./AddressText";
 
 export default function Sign(props) {
   const {
@@ -162,6 +163,7 @@ export default function Sign(props) {
       <View style={styleSheet[isMatsuyama ? "下帯内容B" : "下帯内容"]}>
         <NextPreStationLine {...{ nexStation, preStation, isMatsuyama }} />
       </View>
+      <AddressText {...{ currentStation, isMatsuyama }} />
     </TouchableOpacity>
   );
 }
@@ -176,10 +178,10 @@ const styleSheet = {
   },
   下帯: {
     position: "absolute",
-    bottom: "0%",
+    bottom: "8%",
     left: "0%",
     width: "100%",
-    height: "30%",
+    height: "27%",
     backgroundColor: "#0099CC",
   },
   下帯B: {
@@ -200,8 +202,8 @@ const styleSheet = {
   },
   下帯内容: {
     position: "absolute",
-    bottom: "0%",
-    height: "30%",
+    bottom: "8%",
+    height: "27%",
     width: "100%",
     alignItems: "center",
     flexDirection: "column",

lib/getStationList.js

@@ -116,6 +116,7 @@ export const getStationList = async (props) => {
             if (element.properties.name == stationName) {
               data.lat = element.geometry.coordinates[1];
               data.lng = element.geometry.coordinates[0];
+              data.jslodApi = element.properties.uri;
             }
           });
         return data;
@@ -182,6 +183,7 @@ export const getStationList = async (props) => {
         JrHpUrl: "http://www.jr-shikoku.co.jp/01_trainbus/kakueki/sakaide/",
         lat: 34.313222,
         lng: 133.856325,
+        jslodApi: "https://uedayou.net/jrslod/四国旅客鉄道/予讃線/坂出",
       },
 
       {
@@ -196,6 +198,7 @@ export const getStationList = async (props) => {
         JrHpUrl: "http://www.jr-odekake.net/eki/top.php?id=0651304",
         lat: 34.462562,
         lng: 133.807809,
+        jslodApi: "https://uedayou.net/jrslod/四国旅客鉄道/本四備讃線/児島",
       },
       {
         Station_JP: "宇多津",
@@ -209,6 +212,7 @@ export const getStationList = async (props) => {
         JrHpUrl: "http://www.jr-shikoku.co.jp/01_trainbus/kakueki/utazu/",
         lat: 34.306379,
         lng: 133.813784,
+        jslodApi: "https://uedayou.net/jrslod/四国旅客鉄道/本四備讃線/宇多津",
       },
     ];
     status = stationList;