FooterとHeaderを移動、コードの整理

components/発車時刻表/LED_Vision_Component/Footer.js

@@ -0,0 +1,38 @@
+import { View } from "react-native";
+import { SwitchBox } from "./SwitchBox";
+
+export const Footer = (props) => {
+  const {
+    trainIDSwitch,
+    setTrainIDSwitch,
+    trainDescriptionSwitch,
+    setTrainDescriptionSwitch,
+    finalSwitch,
+    setFinalSwitch,
+  } = props;
+
+  return (
+    <View style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
+      <SwitchBox
+        value={trainIDSwitch}
+        setValue={setTrainIDSwitch}
+        setKey="LEDSettings/trainIDSwitch"
+        title="種別名 / 列番"
+      />
+      <View style={{ flex: 1 }} />
+      <SwitchBox
+        value={trainDescriptionSwitch}
+        setValue={setTrainDescriptionSwitch}
+        setKey="LEDSettings/trainDescriptionSwitch"
+        title="列車情報"
+      />
+      <View style={{ flex: 1 }} />
+      <SwitchBox
+        value={finalSwitch}
+        setValue={setFinalSwitch}
+        setKey="LEDSettings/finalSwitch"
+        title="当駅止表示"
+      />
+    </View>
+  );
+};

components/発車時刻表/LED_Vision_Component/Header.js

@@ -0,0 +1,48 @@
+import { View, Text } from "react-native";
+import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
+import LottieView from "lottie-react-native";
+import { Ionicons } from "@expo/vector-icons";
+
+export const Header = ({ getCurrentTrain }) => {
+    const { currentTrainLoading, setCurrentTrainLoading } = useCurrentTrain();
+    return (
+      <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, 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/発車時刻表/LED_vidion.js

@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
-import LottieView from "lottie-react-native";
-import { Ionicons } from "@expo/vector-icons";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useInterval } from "../../lib/useInterval";
 import { objectIsEmpty } from "../../lib/objectIsEmpty";
@@ -13,7 +11,9 @@ import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
 import { useAreaInfo } from "../../stateBox/useAreaInfo";
 import { SheetManager } from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
-import { SwitchBox } from "./LED_Vision_Component/SwitchBox";
+import { Footer } from "./LED_Vision_Component/Footer";
+import { Header } from "./LED_Vision_Component/Header";
+
 
 /**
  *
@@ -155,11 +155,7 @@ export default function LED_vision(props) {
 
     date.setHours(parseInt(data[0]));
     date.setMinutes(parseInt(data[1]) + parseInt(delay));
-    if (!(newDate > date)) {
+    return !(newDate > date);
-      return true;
-    }
-
-    return false;
   };
 
   const [areaString, setAreaString] = useState("");
@@ -168,11 +164,7 @@ export default function LED_vision(props) {
   useInterval(
     () => {
       if (areaInfo != "") {
-        if (areaStringLength < move) {
+        setMove(areaStringLength < move ? 0 : move + 1);
-          setMove(0);
-        } else {
-          setMove(move + 1);
-        }
       }
     },
     350,
@@ -230,96 +222,20 @@ export default function LED_vision(props) {
       )}
 
       <Footer
-        trainIDSwitch={trainIDSwitch}
+        {...{
-        setTrainIDSwitch={setTrainIDSwitch}
-        trainDescriptionSwitch={trainDescriptionSwitch}
-        setTrainDescriptionSwitch={setTrainDescriptionSwitch}
-        finalSwitch={finalSwitch}
-        setFinalSwitch={setFinalSwitch}
-      />
-    </View>
-  );
-}
-const Header = ({ getCurrentTrain }) => {
-  const { currentTrainLoading, setCurrentTrainLoading } = useCurrentTrain();
-  return (
-    <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, 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>
-  );
-};
-
-const Footer = (props) => {
-  const {
           trainIDSwitch,
           setTrainIDSwitch,
           trainDescriptionSwitch,
           setTrainDescriptionSwitch,
           finalSwitch,
           setFinalSwitch,
-  } = props;
+        }}
-
-
-  return (
-    <View style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
-      <SwitchBox
-        value={trainIDSwitch}
-        setValue={setTrainIDSwitch}
-        setKey="LEDSettings/trainIDSwitch"
-        title="種別名 / 列番"
-      />
-      <View style={{ flex: 1 }} />
-      <SwitchBox
-        value={trainDescriptionSwitch}
-        setValue={setTrainDescriptionSwitch}
-        setKey="LEDSettings/trainDescriptionSwitch"
-        title="列車情報"
-      />
-      <View style={{ flex: 1 }} />
-      <SwitchBox
-        value={finalSwitch}
-        setValue={setFinalSwitch}
-        setKey="LEDSettings/finalSwitch"
-        title="当駅止表示"
       />
     </View>
   );
-};
+}
+
+
 
 const EachData = (props) => {
   const {