Signの動作変更

components/駅名表/Sign.js

@@ -16,6 +16,32 @@ 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(() => {
+    LayoutAnimation.easeInEaseOut();
+    setNexPrePosition(0);
+    getPreNextStation(currentStation[0]);
+  }, [currentStation]);
+
+  useEffect(() => {
+    LayoutAnimation.easeInEaseOut();
+    getPreNextStation(currentStation[nexPrePosition]);
+  }, [nexPrePosition]);
   const getPreNextStation = (now) => {
     const lineList = [
       "予讃線",
@@ -40,16 +66,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,10 +76,13 @@ 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(
+      </View>
-            currentStation[nexPrePosition]
+    </TouchableOpacity>
   );
+}
+
+const NexPreStationLine = ({ nexStation, preStation }) => {
   return (
     <View style={styleSheet.下枠フレーム}>
       <View style={styleSheet.下枠フレーム}>
@@ -98,9 +120,7 @@ export default function Sign(props) {
             {nexStation.StationNumber && (
               <View style={styleSheet.下枠駅ナンバー}>
                 <View style={{ flex: 1 }} />
-                        <Text
+                <Text style={{ fontSize: parseInt("10%"), color: "white" }}>
-                          style={{ fontSize: parseInt("10%"), color: "white" }}
-                        >
                   {nexStation.StationNumber}
                 </Text>
                 <View style={{ flex: 1 }} />
@@ -112,29 +132,24 @@ export default function Sign(props) {
       </View>
     </View>
   );
-        })()}
+};
-      </View>
-    </TouchableOpacity>
-  );
-}
 
 const StationNumberMaker = (props) => {
-  return props.currentStation
+  const getTop = (array, index) => {
-    .filter((d) => (d.StationNumber ? true : false))
-    .map((d, index, array) => (
-      <View
-        key={d + index}
-        style={{
-          position: "absolute",
-          alignContent: "center",
-          alignItems: "center",
-          top:
-            (() => {
     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
+        style={{
+          position: "absolute",
+          alignContent: "center",
+          alignItems: "center",
+          top: getTop(array, index) + "%",
           right: "10%",
           width: wp("10%"),
           height: wp("10%"),