運行情報を定時更新化、LEDでポップアップを出せるように変更

App.js

@@ -105,13 +105,14 @@ export function AppContainer() {
   useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得
 
   const { areaInfo, setAreaInfo } = useAreaInfo();
-  useEffect(() => {
+  const getAreaData = () =>
     fetch(
       "https://script.google.com/macros/s/AKfycbz80LcaEUrhnlEsLkJy0LG2IRO3DBVQhfNmN1d_0f_HvtsujNQpxM90SrV9yKWH_JG1Ww/exec"
     )
       .then((d) => d.text())
       .then((d) => setAreaInfo(d));
-  }, []);
+  useEffect(getAreaData, []);
+  useInterval(getAreaData, 60000); //60秒毎に全在線列車取得
 
   return (
     <NavigationContainer name="Root" style={{ flex: 1 }}>

components/発車時刻表/LED_vidion.js

@@ -199,6 +199,7 @@ export default function LED_vision(props) {
         <Description
           numberOfLines={1}
           info={areaString.replace("\n", "").replace("\r", "")}
+          onClick={() => alert(areaInfo)}
         />
       )}
 
@@ -438,8 +439,8 @@ const StatusAndDelay = ({ trainDelayStatus }) => {
   );
 };
 
-const Description = ({ info, numberOfLines = 0 }) => (
-  <View
+const Description = ({ info, numberOfLines = 0, onClick }) => (
+  <TouchableOpacity
     style={{
       alignContent: "center",
       alignItems: "center",
@@ -449,6 +450,7 @@ const Description = ({ info, numberOfLines = 0 }) => (
       backgroundColor: "#000",
       flexDirection: "row",
     }}
+    onPress={onClick}
   >
     <View style={{ flex: 4 }}>
       <Text
@@ -463,5 +465,5 @@ const Description = ({ info, numberOfLines = 0 }) => (
         &gt; {info}
       </Text>
     </View>
-  </View>
+  </TouchableOpacity>
 );

components/駅名表/Sign.js

@@ -235,6 +235,7 @@ const StationNumberMaker = (props) => {
           borderWidth: parseInt("2%"),
           borderRadius: parseInt("100%"),
         }}
+        key={array[index].StationNumber}
       >
         <View style={{ flex: 1 }} />
         <Text style={{ fontSize: parseInt("20%") }}>{d.StationNumber}</Text>

ndView.js

@@ -1,8 +1,11 @@
-import React from "react";
-import { View, Platform } from "react-native";
+import React, { useRef, useState } from "react";
+import { View, Platform, TouchableOpacity } from "react-native";
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
+import { Ionicons } from "@expo/vector-icons";
 export default function tndView() {
+  const webview = useRef();
+  const [LoadError, setLoadError] = useState(false);
   return (
     <View
       style={{
@@ -13,6 +16,7 @@ export default function tndView() {
     >
       <WebView
         useWebKit={true}
+        ref={webview}
         source={{ uri: "https://www.jr-shikoku.co.jp/info/" }}
         originWhitelist={["https://www.jr-shikoku.co.jp"]}
         mixedContentMode={"compatibility"}
@@ -24,6 +28,11 @@ export default function tndView() {
           this.webView.reload();
         }}
       />
+      <ReloadButton
+        onPress={() => webview.current.reload()}
+        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+        LoadError={LoadError}
+      />
     </View>
   );
 }
@@ -31,3 +40,39 @@ const jsa = `
 document.querySelector('.sitettl').style.display = 'none';	
 document.querySelector('.attention').style.display = 'none';
 `;
+
+const ReloadButton = ({ onPress, top, mapSwitch, LoadError = false }) => {
+  const styles = {
+    touch: {
+      position: "absolute",
+      top,
+      right: 10,
+      width: 50,
+      height: 50,
+      backgroundColor: LoadError ? "red" : "#0099CC",
+      borderColor: "white",
+      borderStyle: "solid",
+      borderWidth: 1,
+      borderRadius: 50,
+      alignContent: "center",
+      alignSelf: "center",
+      alignItems: "center",
+      display: mapSwitch,
+    },
+    text: {
+      textAlign: "center",
+      width: "auto",
+      height: "auto",
+      textAlignVertical: "center",
+      fontWeight: "bold",
+      color: "white",
+    },
+  };
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.touch}>
+      <View style={{ flex: 1 }} />
+      <Ionicons name="reload" color="white" size={30} />
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};