Merge commit 'bf016b1c8b2e84a38c675124888fe338c05d582c'

App.js

@@ -110,6 +110,18 @@ function menuPage() {
         }}
       />
       <Stack.Screen name="setting" component={Setting} options={optionData} />
+      <Stack.Screen
+        name="trainbase"
+        component={trainbase}
+        options={{
+          ...TransitionPresets.ModalPresentationIOS,
+          cardOverlayEnabled: true,
+          headerShown: false,
+          gestureEnabled: true,
+          headerTransparent: true,
+          gestureResponseDistance: { vertical: 300 },
+        }}
+      />
     </Stack.Navigator>
   );
 }

Apps.js

@@ -8,7 +8,7 @@ import {
 } from "react-native";
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { AS } from "./storageControl";
 import { news } from "./config/newsUpdate";
 import { getStationList, lineList } from "./lib/getStationList";
 import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
@@ -53,7 +53,7 @@ export default function Apps(props) {
 
   useEffect(() => {
     //ニュース表示
-    AsyncStorage.getItem("status")
+    AS.getItem("status")
       .then((d) => {
         if (d != news) navigate("news");
       })
@@ -62,54 +62,48 @@ export default function Apps(props) {
 
   useEffect(() => {
     //列車アイコンスイッチ
-    AsyncStorage.getItem("iconSwitch")
+    AS.getItem("iconSwitch")
       .then((d) => {
         if (d) {
           setIconSetting(d);
         } else {
-          AsyncStorage.setItem("iconSwitch", "true").then(Updates.reloadAsync);
+          AS.setItem("iconSwitch", "true").then(Updates.reloadAsync);
         }
       })
-      .catch((d) =>
+      .catch((d) => AS.setItem("iconSwitch", "true").then(Updates.reloadAsync));
-        AsyncStorage.setItem("iconSwitch", "true").then(Updates.reloadAsync)
-      );
   }, []);
 
   useEffect(() => {
     //地図スイッチ
-    AsyncStorage.getItem("mapSwitch")
+    AS.getItem("mapSwitch")
       .then((d) => {
         if (d) {
           setMapSwitch(d);
         } else {
-          AsyncStorage.setItem("mapSwitch", "false").then(Updates.reloadAsync);
+          AS.setItem("mapSwitch", "false").then(Updates.reloadAsync);
         }
       })
-      .catch((d) =>
+      .catch((d) => AS.setItem("mapSwitch", "false").then(Updates.reloadAsync));
-        AsyncStorage.setItem("mapSwitch", "false").then(Updates.reloadAsync)
-      );
   }, []);
 
   useEffect(() => {
     //駅メニュースイッチ
-    AsyncStorage.getItem("stationSwitch")
+    AS.getItem("stationSwitch")
       .then((d) => {
         if (d) {
           setStationMenu(d);
         } else {
-          AsyncStorage.setItem("stationSwitch", "true").then(
+          AS.setItem("stationSwitch", "true").then(Updates.reloadAsync);
-            Updates.reloadAsync
-          );
         }
       })
       .catch((d) =>
-        AsyncStorage.setItem("stationSwitch", "true").then(Updates.reloadAsync)
+        AS.setItem("stationSwitch", "true").then(Updates.reloadAsync)
       );
   }, []);
 
   const onMessage = (event) => {
     if (!event.nativeEvent.data.includes("PopUpMenu")) {
-      navigate("trainbase", { info: event.nativeEvent.data });
+      navigate("trainbase", { info: event.nativeEvent.data, from: "Train" });
       return;
     }
     if (!originalStationList) {

components/ActionSheetComponents/JRSTraInfo.js

@@ -22,7 +22,7 @@ export const JRSTraInfo = (props) => {
     <ActionSheet
       ref={JRSTraInfoEXAcSR}
       gestureEnabled
-      CustomHeaderComponent={(props) => <></>}
+      CustomHeaderComponent={<></>}
     >
       <View
         style={{

components/ActionSheetComponents/StationDeteilView.js

@@ -13,7 +13,7 @@ export const StationDeteilView = (props) => {
     <ActionSheet
       ref={StationBoardAcSR}
       gestureEnabled
-      CustomHeaderComponent={(props) => <></>}
+      CustomHeaderComponent={<></>}
     >
       <View
         key={currentStation}

components/news.js

@@ -2,7 +2,7 @@ import React from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 import { WebView } from "react-native-webview";
 import StatusbarDetect from "../StatusbarDetect";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { AS } from "../storageControl";
 import { news } from "../config/newsUpdate";
 var Status = StatusbarDetect();
 export default function News(props) {
@@ -30,7 +30,7 @@ export default function News(props) {
           alignItems: "center",
         }}
         onPress={() => {
-          AsyncStorage.setItem("status", news);
+          AS.setItem("status", news);
           navigate("Apps");
         }}
       >

components/settings.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 import * as Updates from "expo-updates";
 import StatusbarDetect from "../StatusbarDetect";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { AS } from "../storageControl";
 var Status = StatusbarDetect();
 import { Switch } from "react-native-elements";
 
@@ -14,9 +14,9 @@ export default function Setting(props) {
   const [mapSwitch, setMapSwitch] = useState(undefined);
   const [stationMenu, setStationMenu] = useState(undefined);
   useEffect(() => {
-    AsyncStorage.getItem("iconSwitch").then(setIconSetting);
+    AS.getItem("iconSwitch").then(setIconSetting);
-    AsyncStorage.getItem("mapSwitch").then(setMapSwitch);
+    AS.getItem("mapSwitch").then(setMapSwitch);
-    AsyncStorage.getItem("stationSwitch").then(setStationMenu);
+    AS.getItem("stationSwitch").then(setStationMenu);
   }, []);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
@@ -102,7 +102,7 @@ export default function Setting(props) {
                 textAlignVertical: "center",
               }}
             >
-              内部バージョン: 4.4.2.6
+              内部バージョン: 4.4.2.7
             </Text>
             <View style={{ flex: 1 }} />
           </View>
@@ -134,9 +134,9 @@ export default function Setting(props) {
         }}
         onPress={() => {
           Promise.all([
-            AsyncStorage.setItem("iconSwitch", iconSetting.toString()),
+            AS.setItem("iconSwitch", iconSetting.toString()),
-            AsyncStorage.setItem("mapSwitch", mapSwitch.toString()),
+            AS.setItem("mapSwitch", mapSwitch.toString()),
-            AsyncStorage.setItem("stationSwitch", stationMenu.toString()),
+            AS.setItem("stationSwitch", stationMenu.toString()),
           ]).then(() => {
             Updates.reloadAsync();
           });

components/trainMenu.js

@@ -1,6 +1,5 @@
 import React, { useRef } from "react";
 import { View, Text, TouchableOpacity, Linking } from "react-native";
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import MapView, { Marker } from "react-native-maps";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 export default function trainMenu({
@@ -101,7 +100,6 @@ export default function trainMenu({
           alignItems: "center",
         }}
         onPress={() => {
-          AsyncStorage.setItem("status", "2022/04/14");
           navigate("Apps");
         }}
       >

components/発車時刻表/LED_vidion.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from "react";
-import { View, Text } from "react-native";
+import { View, Text, TouchableOpacity } from "react-native";
 import { Switch } from "react-native-elements";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useInterval } from "../../lib/useInterval";
 import trainList from "../../assets/originData/trainList";
+import { objectIsEmpty } from "../../lib/objectIsEmpty";
 
 let diagramData = undefined;
 
@@ -43,14 +44,27 @@ export default function LED_vision(props) {
       referer: "https://train.jr-shikoku.co.jp/sp.html",
     },
   };
-  const [trainDiagram, setTrainDiagram] = useState(null);
+  const [trainDiagram, setTrainDiagram] = useState(null); // 全列車のダイヤを列番ベースで整理
-  const [stationDiagram, setStationDiagram] = useState(null);
+  const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
-  const [currentTrain, setCurrentTrain] = useState(null);
+  const [currentTrain, setCurrentTrain] = useState(null); //現在在線中の全列車
   const [finalSwitch, setFinalSwitch] = useState(false);
   const [trainIDSwitch, setTrainIDSwitch] = useState(false);
   const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
 
+  const parseAllTrainDiagram = (text) => {
+    const val = text.replace("[\r\n", "").split(",\r\n");
+    let trainDiagram = {};
+    val.forEach((element) => {
+      try {
+        let data = JSON.parse(element);
+        Object.keys(data).forEach((key) => (trainDiagram[key] = data[key]));
+      } catch (e) {}
+    });
+    return trainDiagram;
+  };
+
   useEffect(() => {
+    //全列車リストを生成する副作用[無条件初回実行]
     fetch(
       "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia",
       HeaderConfig
@@ -58,56 +72,55 @@ export default function LED_vision(props) {
       .then((response) => response.text())
       .then((d) => {
         if (d.indexOf("<title>404 Not Found</title>") != -1) throw Error;
-        const val = d.replace("[\r\n", "").split(",\r\n");
+        setTrainDiagram(parseAllTrainDiagram(d));
-        let trainDiagram = {};
-        val.forEach((element) => {
-          try {
-            let data = JSON.parse(element);
-            Object.keys(data).forEach((key) => (trainDiagram[key] = data[key]));
-          } catch (e) {}
-        });
-        setTrainDiagram(trainDiagram);
-        return trainDiagram;
-      })
-      .then((trainDiagram) => {
-        let returnData = {};
-        if (!trainDiagram) {
-          setStationDiagram(returnData);
-          return;
-        }
-        Object.keys(trainDiagram).forEach((key) => {
-          if (trainDiagram[key].match(props.station.Station_JP)) {
-            returnData[key] = trainDiagram[key];
-          }
-        });
-        setStationDiagram(returnData);
       })
       .catch((d) => {
         console.log("fallback");
         setTrainDiagram(trainList);
-        let returnData = {};
-        if (!trainList) {
-          setStationDiagram(returnData);
-          return;
-        }
-        Object.keys(trainList).forEach((key) => {
-          if (trainList[key].match(props.station.Station_JP)) {
-            returnData[key] = trainList[key];
-          }
-        });
-        setStationDiagram(returnData);
       });
   }, []);
 
-  const getTime = () => {
+  useEffect(() => {
-    const returnData = [];
+    // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
-    Object.keys(stationDiagram).forEach((d) => {
+    if (!trainDiagram) {
+      setStationDiagram({});
+      return;
+    }
+    let returnData = {};
+    Object.keys(trainDiagram).forEach((key) => {
+      if (trainDiagram[key].match(props.station.Station_JP)) {
+        returnData[key] = trainDiagram[key];
+      }
+    });
+    setStationDiagram(returnData);
+  }, [trainDiagram, props.station]);
+
+  const getCurrentTrain = () =>
+    fetch(
+      "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
+      HeaderConfig
+    )
+      .then((response) => response.json())
+      .then((d) =>
+        d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos }))
+      )
+      .then(setCurrentTrain)
+      .catch((e) => {
+        console.log(e);
+      });
+
+  useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得
+
+  useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得
+
+  const getTime = (stationDiagram, station) => {
+    const returnData = Object.keys(stationDiagram).map((d) => {
       let a = {};
       stationDiagram[d].split("#").forEach((data) => {
         if (data.match("着")) {
           a.lastStation = data.split(",着,")[0];
         }
-        if (data.match(props.station.Station_JP)) {
+        if (data.match(station.Station_JP)) {
           if (data.match(",発,")) {
             a.time = data.split(",発,")[1];
           } else {
@@ -116,9 +129,8 @@ export default function LED_vision(props) {
           }
         }
       });
-      returnData.push({ train: d, time: a.time, lastStation: a.lastStation });
+      return { train: d, time: a.time, lastStation: a.lastStation };
     });
-
     return returnData.sort((a, b) => {
       switch (true) {
         case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]):
@@ -132,23 +144,15 @@ export default function LED_vision(props) {
       }
     });
   };
-  const trainTimeAndNumber = stationDiagram != null ? getTime() : null;
+
-  const getCurrentTrain = () =>
+  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
-    fetch(
-      "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
-      HeaderConfig
-    )
-      .then((response) => response.json())
-      .then((d) =>
-        d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos }))
-      )
-      .then(setCurrentTrain);
 
   useEffect(() => {
-    getCurrentTrain();
+    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
-  }, []);
+    if (objectIsEmpty(stationDiagram)) return () => {};
-
+    const getTimeData = getTime(stationDiagram, props.station);
-  useInterval(getCurrentTrain, 15000);
+    setTrainTimeAndNumber(getTimeData);
+  }, [stationDiagram]);
 
   const timeFiltering = (d) => {
     const date = new Date();
@@ -166,6 +170,135 @@ export default function LED_vision(props) {
 
     return false;
   };
+
+  const [selectedTrain, setSelectedTrain] = useState([]);
+  useEffect(() => {
+    if (!trainTimeAndNumber) return () => {};
+    if (!currentTrain) return () => {};
+    const data = trainTimeAndNumber
+      .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
+      .filter(timeFiltering)
+      .filter((d) => !!finalSwitch || d.lastStation != "当駅止");
+    setSelectedTrain(data);
+  }, [trainTimeAndNumber, currentTrain, finalSwitch]);
+  return (
+    <View
+      style={{
+        width: wp("98%"),
+        /*  height: wp("98%")/10*9, */ backgroundColor: "#432",
+        borderWidth: 1,
+        margin: 10,
+        marginHorizontal: wp("1%"),
+      }}
+    >
+      <Header />
+      {selectedTrain.map((d, index) => (
+        <EachData
+          d={d}
+          trainIDSwitch={trainIDSwitch}
+          trainDescriptionSwitch={trainDescriptionSwitch}
+          props={props}
+          currentTrain={currentTrain}
+          customTrainDataDetector={customTrainDataDetector}
+          navigate={props.navigate}
+        />
+      ))}
+      <Footer
+        trainIDSwitch={trainIDSwitch}
+        setTrainIDSwitch={setTrainIDSwitch}
+        trainDescriptionSwitch={trainDescriptionSwitch}
+        setTrainDescriptionSwitch={setTrainDescriptionSwitch}
+        finalSwitch={finalSwitch}
+        setFinalSwitch={setFinalSwitch}
+      />
+    </View>
+  );
+}
+const Header = () => (
+  <View
+    style={{
+      alignContent: "center",
+      alignItems: "center",
+      width: "100%",
+      marginVertical: 10,
+      flexDirection: "row",
+    }}
+  >
+    <View style={{ flex: 1 }}></View>
+    <View style={{}}>
+      <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
+        次の列車
+      </Text>
+      <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
+    </View>
+    <View style={{ flex: 1 }}></View>
+  </View>
+);
+
+const Footer = ({
+  trainIDSwitch,
+  setTrainIDSwitch,
+  trainDescriptionSwitch,
+  setTrainDescriptionSwitch,
+  finalSwitch,
+  setFinalSwitch,
+}) => {
+  return (
+    <View style={{ flexDirection: "row", padding: 10 }}>
+      <Text
+        style={{
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+          color: "white",
+        }}
+      >
+        種別名 / 列番
+      </Text>
+      <Switch value={trainIDSwitch} onValueChange={setTrainIDSwitch} />
+      <View style={{ flex: 1 }} />
+      <Text
+        style={{
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+          color: "white",
+        }}
+      >
+        列車情報
+      </Text>
+      <Switch
+        value={trainDescriptionSwitch}
+        onValueChange={setTrainDescriptionSwitch}
+      />
+      <View style={{ flex: 1 }} />
+      <Text
+        style={{
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+          color: "white",
+        }}
+      >
+        当駅止表示
+      </Text>
+      <Switch value={finalSwitch} onValueChange={setFinalSwitch} />
+    </View>
+  );
+};
+
+const EachData = ({
+  d,
+  trainIDSwitch,
+  trainDescriptionSwitch,
+  props,
+  currentTrain,
+  customTrainDataDetector,
+  navigate,
+}) => {
   const getTrainType = (data) => {
     switch (data) {
       case "Rapid":
@@ -178,203 +311,163 @@ export default function LED_vision(props) {
         return { color: "white", name: "普通列車" };
     }
   };
+  const train = customTrainDataDetector(d.train);
   return (
-    <View
+    <>
-      style={{
+      <TouchableOpacity
-        width: wp("98%"),
-        /*  height: wp("98%")/10*9, */ backgroundColor: "#432",
-        borderWidth: 1,
-        margin: 10,
-        marginHorizontal: wp("1%"),
-      }}
-    >
-      <View
         style={{
           alignContent: "center",
           alignItems: "center",
-          width: "100%",
+          width: "94%",
-          marginVertical: 10,
+          marginVertical: 5,
+          marginHorizontal: "3%",
+          backgroundColor: "#000",
           flexDirection: "row",
         }}
+        onPress={() => {
+          if (train.type != "Normal") {
+            navigate("trainbase", {
+              info: "train.html?tn=" + d.train,
+              from: "LED",
+            });
+          }
+        }}
       >
-        <View style={{ flex: 1 }}></View>
+        <TrainName
-        <View style={{}}>
+          train={train}
-          <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
+          trainIDSwitch={trainIDSwitch}
-            次の列車
+          d={d}
-          </Text>
+          getTrainType={getTrainType(train.type)}
-          <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
-        </View>
-        <View style={{ flex: 1 }}></View>
-      </View>
-      {trainTimeAndNumber
-        ? currentTrain &&
-          trainTimeAndNumber
-            .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
-            .filter(timeFiltering)
-            .filter((d) => !!finalSwitch || d.lastStation != "当駅止")
-            .map((d, index) => {
-              const train = customTrainDataDetector(d.train);
-              return [
-                <View
-                  style={{
-                    alignContent: "center",
-                    alignItems: "center",
-                    width: "94%",
-                    marginVertical: 5,
-                    marginHorizontal: "3%",
-                    backgroundColor: "#000",
-                    flexDirection: "row",
-                  }}
-                  key={d.train}
-                >
-                  <View style={{ flex: 9 }}>
-                    <Text
-                      style={{
-                        fontSize: train.trainName.length > 6 ? 15 : 20,
-                        color: getTrainType(train.type).color,
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {trainIDSwitch
-                        ? d.train
-                        : getTrainType(train.type).name +
-                          " " +
-                          train.trainName +
-                          (train.trainNumDistance == undefined
-                            ? ""
-                            : parseInt(
-                                d.train.replace("M", "").replace("D", "")
-                              ) -
-                              train.trainNumDistance +
-                              "号")}
-                    </Text>
-                  </View>
-                  <View style={{ flex: 4, flexDirection: "row" }}>
-                    <Text
-                      style={{
-                        fontSize: d.lastStation.length > 4 ? 15 : 20,
-                        color: "white",
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {d.lastStation}
-                    </Text>
-                  </View>
-                  <View style={{ flex: 3 }}>
-                    <Text
-                      style={{
-                        fontSize: 20,
-                        color: "white",
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {d.time}
-                    </Text>
-                  </View>
-                  <View style={{ flex: 4 }}>
-                    <Text
-                      style={{
-                        fontSize: 20,
-                        color: "white",
-                        fontWeight: "bold",
-                      }}
-                    >
-                      {(() => {
-                        const current = currentTrain.filter(
-                          (a) => a.num == d.train
-                        )[0];
-                        const delay = current.delay;
-                        switch (true) {
-                          case delay == "入線":
-                            if (current.Pos == props.station.Station_JP) {
-                              return "当駅始発";
-                            } else {
-                              return "発車前";
-                            }
-
-                          case isNaN(delay):
-                            return delay;
-                          case delay == 0:
-                            return "定刻通り";
-                          default:
-                            return delay + "分遅れ";
-                        }
-                      })()}
-                    </Text>
-                  </View>
-                </View>,
-                trainDescriptionSwitch && !!train.info && (
-                  <View
-                    style={{
-                      alignContent: "center",
-                      alignItems: "center",
-                      width: "94%",
-                      marginVertical: 5,
-                      marginHorizontal: "3%",
-                      backgroundColor: "#000",
-                      flexDirection: "row",
-                    }}
-                  >
-                    <View style={{ flex: 4 }}>
-                      <Text
-                        style={{
-                          fontSize: 20,
-                          color: "green",
-                          fontWeight: "bold",
-                        }}
-                      >
-                        {" "}
-                        &gt; {train.info}
-                      </Text>
-                    </View>
-                  </View>
-                ),
-              ];
-            })
-        : null}
-      <View style={{ flexDirection: "row", padding: 10 }}>
-        <Text
-          style={{
-            alignItems: "center",
-            alignContent: "center",
-            textAlign: "center",
-            textAlignVertical: "center",
-            color: "white",
-          }}
-        >
-          種別名 / 列番
-        </Text>
-        <Switch value={trainIDSwitch} onValueChange={setTrainIDSwitch} />
-        <View style={{ flex: 1 }} />
-        <Text
-          style={{
-            alignItems: "center",
-            alignContent: "center",
-            textAlign: "center",
-            textAlignVertical: "center",
-            color: "white",
-          }}
-        >
-          列車情報
-        </Text>
-        <Switch
-          value={trainDescriptionSwitch}
-          onValueChange={setTrainDescriptionSwitch}
         />
-        <View style={{ flex: 1 }} />
+        <LastStation d={d} />
+        <DependTime d={d} />
+        <StatusAndDelay currentTrain={currentTrain} d={d} props={props} />
+      </TouchableOpacity>
+      {trainDescriptionSwitch && !!train.info && <Description train={train} />}
+    </>
+  );
+};
+
+const TrainName = ({ train, trainIDSwitch, d, getTrainType }) => {
+  const { trainName, trainNumDistance } = train;
+  let TrainNumber = "";
+  if (trainNumDistance != undefined) {
+    const timeInfo =
+      parseInt(d.train.replace("M", "").replace("D", "")) - trainNumDistance;
+    TrainNumber = timeInfo + "号";
+  }
+  return (
+    <View style={{ flex: 9 }}>
+      <Text
+        style={{
+          fontSize: trainName.length > 6 ? 15 : 20,
+          color: getTrainType.color,
+          fontWeight: "bold",
+        }}
+      >
+        {trainIDSwitch
+          ? d.train
+          : `${getTrainType.name} ${trainName}${TrainNumber}`}
+      </Text>
+    </View>
+  );
+};
+
+const LastStation = ({ d }) => {
+  return (
+    <View style={{ flex: 4, flexDirection: "row" }}>
+      <Text
+        style={{
+          fontSize: d.lastStation.length > 4 ? 15 : 20,
+          color: "white",
+          fontWeight: "bold",
+        }}
+      >
+        {d.lastStation}
+      </Text>
+    </View>
+  );
+};
+const DependTime = ({ d }) => {
+  return (
+    <View style={{ flex: 3 }}>
+      <Text
+        style={{
+          fontSize: 20,
+          color: "white",
+          fontWeight: "bold",
+        }}
+      >
+        {d.time}
+      </Text>
+    </View>
+  );
+};
+
+const StatusAndDelay = ({ currentTrain, d, props }) => {
+  const [status, setStatus] = useState("");
+  useEffect(() => {
+    const current = currentTrain.filter((a) => a.num == d.train)[0];
+    const delay = current.delay;
+    switch (true) {
+      case delay === "入線":
+        if (current.Pos === props.station.Station_JP) {
+          setStatus("当駅始発");
+          break;
+        } else {
+          setStatus("発車前");
+          break;
+        }
+      case isNaN(delay):
+        setStatus(delay);
+        break;
+      case delay === 0:
+        setStatus("定刻通り");
+        break;
+      default:
+        setStatus(delay + "分遅れ");
+        break;
+    }
+  }, []);
+  return (
+    <View style={{ flex: 4 }}>
+      <Text
+        style={{
+          fontSize: 20,
+          color: "white",
+          fontWeight: "bold",
+        }}
+      >
+        {status}
+      </Text>
+    </View>
+  );
+};
+const Description = ({ train }) => {
+  return (
+    <View
+      style={{
+        alignContent: "center",
+        alignItems: "center",
+        width: "94%",
+        marginVertical: 5,
+        marginHorizontal: "3%",
+        backgroundColor: "#000",
+        flexDirection: "row",
+      }}
+    >
+      <View style={{ flex: 4 }}>
         <Text
           style={{
-            alignItems: "center",
+            fontSize: 20,
-            alignContent: "center",
+            color: "green",
-            textAlign: "center",
+            fontWeight: "bold",
-            textAlignVertical: "center",
-            color: "white",
           }}
         >
-          当駅止表示
+          {" "}
+          &gt; {train.info}
         </Text>
-        <Switch value={finalSwitch} onValueChange={setFinalSwitch} />
       </View>
     </View>
   );
-}
+};

components/駅名表/Sign.js

@@ -16,6 +16,31 @@ import { useInterval } from "../../lib/useInterval";
 
 export default function Sign(props) {
   const { currentStation, originalStationList, oP } = props;
+  const [nexPrePosition, setNexPrePosition] = useState(0);
+
+  const [preStation, setPreStation] = useState();
+  const [nexStation, setNexStation] = useState();
+
+  useInterval(() => {
+    if (currentStation.length == 1) {
+      setNexPrePosition(0);
+      return () => {};
+    }
+    LayoutAnimation.easeInEaseOut();
+    setNexPrePosition(
+      nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
+    );
+  }, 2000);
+
+  useEffect(() => {
+    setNexPrePosition(0);
+    getPreNextStation(currentStation[0]);
+  }, [currentStation]);
+
+  useEffect(() => {
+    if (!currentStation[nexPrePosition]) return () => {};
+    getPreNextStation(currentStation[nexPrePosition]);
+  }, [nexPrePosition]);
   const getPreNextStation = (now) => {
     const lineList = [
       "予讃線",
@@ -40,16 +65,9 @@ export default function Sign(props) {
         ];
       }
     });
-    return returnData;
+    setPreStation(returnData[0]);
+    setNexStation(returnData[1]);
   };
-  const [nexPrePosition, setNexPrePosition] = useState(0);
-  useInterval(() => {
-    if (currentStation.length == 1) return;
-    LayoutAnimation.easeInEaseOut();
-    setNexPrePosition(
-      nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
-    );
-  }, 2000);
   return (
     <TouchableOpacity style={styleSheet.外枠} onPress={oP}>
       <StationNumberMaker currentStation={currentStation} />
@@ -57,84 +75,80 @@ export default function Sign(props) {
       <Text style={styleSheet.JRStyle}>JR</Text>
       <View style={styleSheet.下帯} />
       <View style={styleSheet.下帯内容}>
-        {(() => {
+        <NexPreStationLine preStation={preStation} nexStation={nexStation} />
-          let [preStation, nexStation] = getPreNextStation(
-            currentStation[nexPrePosition]
-          );
-          return (
-            <View style={styleSheet.下枠フレーム}>
-              <View style={styleSheet.下枠フレーム}>
-                {preStation && (
-                  <>
-                    <Text style={styleSheet.下枠左右マーク}>◀</Text>
-                    {preStation.StationNumber && (
-                      <View style={styleSheet.下枠駅ナンバー}>
-                        <View style={{ flex: 1 }} />
-                        <Text
-                          style={{
-                            fontSize: parseInt("10%"),
-                            color: "white",
-                          }}
-                        >
-                          {preStation.StationNumber}
-                        </Text>
-                        <View style={{ flex: 1 }} />
-                      </View>
-                    )}
-                    <StationName
-                      stringData={preStation}
-                      ss={{ flex: 1, alignItems: "flex-start" }}
-                    />
-                  </>
-                )}
-              </View>
-              <View style={styleSheet.下枠フレーム}>
-                {nexStation && (
-                  <>
-                    <StationName
-                      stringData={nexStation}
-                      ss={{ flex: 1, alignItems: "flex-end" }}
-                    />
-                    {nexStation.StationNumber && (
-                      <View style={styleSheet.下枠駅ナンバー}>
-                        <View style={{ flex: 1 }} />
-                        <Text
-                          style={{ fontSize: parseInt("10%"), color: "white" }}
-                        >
-                          {nexStation.StationNumber}
-                        </Text>
-                        <View style={{ flex: 1 }} />
-                      </View>
-                    )}
-                    <Text style={styleSheet.下枠左右マーク}>▶</Text>
-                  </>
-                )}
-              </View>
-            </View>
-          );
-        })()}
       </View>
     </TouchableOpacity>
   );
 }
 
+const NexPreStationLine = ({ nexStation, preStation }) => {
+  return (
+    <View style={styleSheet.下枠フレーム}>
+      <View style={styleSheet.下枠フレーム}>
+        {preStation && (
+          <>
+            <Text style={styleSheet.下枠左右マーク}>◀</Text>
+            {preStation.StationNumber && (
+              <View style={styleSheet.下枠駅ナンバー}>
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    fontSize: parseInt("10%"),
+                    color: "white",
+                  }}
+                >
+                  {preStation.StationNumber}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            )}
+            <StationName
+              stringData={preStation}
+              ss={{ flex: 1, alignItems: "flex-start" }}
+            />
+          </>
+        )}
+      </View>
+      <View style={styleSheet.下枠フレーム}>
+        {nexStation && (
+          <>
+            <StationName
+              stringData={nexStation}
+              ss={{ flex: 1, alignItems: "flex-end" }}
+            />
+            {nexStation.StationNumber && (
+              <View style={styleSheet.下枠駅ナンバー}>
+                <View style={{ flex: 1 }} />
+                <Text style={{ fontSize: parseInt("10%"), color: "white" }}>
+                  {nexStation.StationNumber}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            )}
+            <Text style={styleSheet.下枠左右マーク}>▶</Text>
+          </>
+        )}
+      </View>
+    </View>
+  );
+};
+
 const StationNumberMaker = (props) => {
+  const getTop = (array, index) => {
+    if (array.length == 1) return 20;
+    else if (index == 0) return 5;
+    else if (index == 1) return 35;
+    else return 20;
+  };
   return props.currentStation
     .filter((d) => (d.StationNumber ? true : false))
     .map((d, index, array) => (
       <View
-        key={d + index}
         style={{
           position: "absolute",
           alignContent: "center",
           alignItems: "center",
-          top:
+          top: getTop(array, index) + "%",
-            (() => {
-              if (array.length == 1) return 20;
-              else if (index == 0) return 5;
-              else if (index == 1) return 35;
-              else return 20;
-            })() + "%",
           right: "10%",
           width: wp("10%"),
           height: wp("10%"),

lib/objectIsEmpty.js

@@ -0,0 +1,3 @@
+export const objectIsEmpty = (obj) => {
+  return !Object.keys(obj).length;
+};

menu.js

@@ -97,7 +97,7 @@ export default function Menu(props) {
         pre.push(...current);
         return pre;
       }, []);
-    LayoutAnimation.spring();
+    LayoutAnimation.easeInEaseOut();
     if (returnDataBase.length) {
       let currentStation = currentStation == undefined ? [] : currentStation;
       if (currentStation.toString() != returnDataBase.toString()) {
@@ -160,7 +160,7 @@ export default function Menu(props) {
               originalStationList={originalStationList}
               oP={StationBoardAcSR.current?.setModalVisible}
             />
-            <LED_vision station={currentStation[0]} />
+            <LED_vision station={currentStation[0]} navigate={navigate} />
           </>
         )}
         <JRSTraInfoBox
@@ -606,7 +606,7 @@ const JRSTraInfoBox = (props) => {
             delayData.map((d, index) => {
               let data = d.split(" ");
               return (
-                <View style={{ flexDirection: "row" }} key={index}>
+                <View style={{ flexDirection: "row" }} key={data[1] + "key"}>
                   <Text style={{ flex: 15, fontSize: 20 }}>
                     {data[0].replace("\n", "")}
                   </Text>

storageConfig.js

@@ -0,0 +1,27 @@
+import Storage from "react-native-storage";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const storage = new Storage({
+  // maximum capacity, default 1000 key-ids
+  size: 10000,
+
+  // Use AsyncStorage for RN apps, or window.localStorage for web apps.
+  // If storageBackend is not set, data will be lost after reload.
+  storageBackend: AsyncStorage, // for web: window.localStorage
+
+  // expire time, default: 1 day (1000 * 3600 * 24 milliseconds).
+  // can be null, which means never expire.
+  defaultExpires: null,
+
+  // cache data in the memory. default is true.
+  enableCache: true,
+
+  // if data was not found in storage or expired data was found,
+  // the corresponding sync method will be invoked returning
+  // the latest data.
+  sync: {
+    // we'll talk about the details later.
+  },
+});
+
+export default storage;

storageControl.js

@@ -0,0 +1,14 @@
+import storage from "./storageConfig.js";
+
+export const AS = {
+  getItem: (key) => storage.load({ key }),
+  setItem: (key, data) =>
+    storage.save({
+      key, // Note: Do not use underscore("_") in key!
+      data,
+
+      // if expires not specified, the defaultExpires will be applied instead.
+      // if set to null, then it will never expire.
+      expires: null,
+    }),
+};

trainbaseview.js

@@ -1,9 +1,18 @@
 import React, { Component, useRef } from "react";
-import { StatusBar, Platform, View } from "react-native";
+import {
+  StatusBar,
+  Platform,
+  View,
+  TouchableOpacity,
+  Text,
+} from "react-native";
 import { WebView } from "react-native-webview";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 
-export default function TrainBase({ route }) {
+export default function TrainBase({ route, navigation }) {
-  const { info } = route.params;
+  const { info, from } = route.params;
+  const { navigate } = navigation;
+  console.log(info);
   const webview = useRef();
   const jss = `document.getElementById('Footer').style.display = 'none';
   ${
@@ -28,6 +37,27 @@ export default function TrainBase({ route }) {
         setSupportMultipleWindows={false}
         onMessage={(event) => {}}
       />
+      {from == "LED" && (
+        <TouchableOpacity
+          style={{
+            padding: 10,
+            flexDirection: "row",
+            borderColor: "black",
+            borderWidth: 1,
+            margin: 10,
+            borderRadius: 5,
+            alignItems: "center",
+          }}
+          onPress={() => navigate("menu")}
+        >
+          <View style={{ flex: 1 }} />
+          <MaterialCommunityIcons name="close" color="black" size={30} />
+          <Text style={{ fontSize: 25, fontWeight: "bold", color: "black" }}>
+            閉じる
+          </Text>
+          <View style={{ flex: 1 }} />
+        </TouchableOpacity>
+      )}
     </View>
   );
 }