エラー発生時の再試行用ボタンの設置

Apps.js

@@ -8,6 +8,7 @@ import {
 } from "react-native";
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { AS } from "./storageControl";
 import { news } from "./config/newsUpdate";
 import { getStationList, lineList } from "./lib/getStationList";
@@ -192,6 +193,10 @@ export default function Apps(props) {
         top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
         mapSwitch={mapSwitch == "true" ? "flex" : "none"}
       />
+      <ReloadButton
+        onPress={() => webview.current.reload()}
+        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+      />
 
       <StationDeteilView
         StationBoardAcSR={StationBoardAcSR}
@@ -237,3 +242,39 @@ const MapsButton = ({ onPress, top, mapSwitch }) => {
     </TouchableOpacity>
   );
 };
+
+const ReloadButton = ({ onPress, top, mapSwitch }) => {
+  const styles = {
+    touch: {
+      position: "absolute",
+      top,
+      right: 10,
+      width: 50,
+      height: 50,
+      backgroundColor: "#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>
+  );
+};

components/発車時刻表/LED_vidion.js

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 import { Switch } from "react-native-elements";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+import LottieView from "lottie-react-native";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useInterval } from "../../lib/useInterval";
 import trainList from "../../assets/originData/trainList";
@@ -47,6 +49,7 @@ export default function LED_vision(props) {
   const [trainDiagram, setTrainDiagram] = useState(null); // 全列車のダイヤを列番ベースで整理
   const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
   const [currentTrain, setCurrentTrain] = useState(null); //現在在線中の全列車
+  const [currentTrainLoading, setCurrentTrainLoading] = useState("loading");
   const [finalSwitch, setFinalSwitch] = useState(false);
   const [trainIDSwitch, setTrainIDSwitch] = useState(false);
   const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
@@ -104,9 +107,13 @@ export default function LED_vision(props) {
       .then((d) =>
         d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos }))
       )
-      .then(setCurrentTrain)
+      .then((d) => {
+        setCurrentTrain(d);
+        setCurrentTrainLoading("success");
+      })
       .catch((e) => {
-        console.log(e);
+        console.log("えらー");
+        setCurrentTrainLoading("error");
       });
 
   useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得
@@ -191,7 +198,11 @@ export default function LED_vision(props) {
         marginHorizontal: wp("1%"),
       }}
     >
-      <Header />
+      <Header
+        currentTrainLoading={currentTrainLoading}
+        setCurrentTrainLoading={setCurrentTrainLoading}
+        getCurrentTrain={getCurrentTrain}
+      />
       {selectedTrain.map((d, index) => (
         <EachData
           d={d}
@@ -214,7 +225,11 @@ export default function LED_vision(props) {
     </View>
   );
 }
-const Header = () => (
+const Header = ({
+  currentTrainLoading,
+  setCurrentTrainLoading,
+  getCurrentTrain,
+}) => (
   <View
     style={{
       alignContent: "center",
@@ -231,7 +246,27 @@ const Header = () => (
       </Text>
       <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
     </View>
-    <View style={{ flex: 1 }}></View>
+    <View style={{ flex: 1, flexDirection: "row-reverse" }}>
+      {currentTrainLoading == "loading" ? (
+        <LottieView
+          autoPlay
+          loop
+          style={{ width: 40, height: 40, marginRight: 30 }}
+          source={require("../../assets/51690-loading-diamonds.json")}
+        />
+      ) : currentTrainLoading == "error" ? (
+        <Ionicons
+          name="reload"
+          color="white"
+          size={30}
+          style={{ marginRight: 30 }}
+          onPress={() => {
+            setCurrentTrainLoading("loading");
+            getCurrentTrain();
+          }}
+        />
+      ) : null}
+    </View>
   </View>
 );
 

components/駅名表/Sign.js

@@ -201,6 +201,7 @@ const styleSheet = {
     borderWidth: 1,
     margin: 10,
     marginHorizontal: wp("10%"),
+    backgroundColor: "white",
   },
   下帯: {
     position: "absolute",