LEDに運行情報を表示するように変更

App.js

@@ -69,7 +69,7 @@ export default function App() {
 
   const [currentTrain, setCurrentTrain] = useState([]); //現在在線中の全列車 { num: 列車番号, delay: 遅延時分(状態), Pos: 位置情報 }
   const [currentTrainLoading, setCurrentTrainLoading] = useState("loading"); // success, error, loading
-  
+
   const getCurrentTrain = () =>
     fetch(
       "https://script.google.com/macros/s/AKfycby9Y2-Bm75J_WkbZimi7iS8v5r9wMa9wtzpdwES9sOGF4i6HIYEJOM60W6gM1gXzt1o/exec",
@@ -104,7 +104,6 @@ export default function App() {
 
   return (
     <NavigationContainer name="Root" style={{ flex: 1 }}>
-       {areaInfo != "" && <Text onPress={() => alert(areaInfo)}>{areaInfo}</Text>}
       <Tab.Navigator detachInactiveScreens={false}>
         <Tab.Screen
           name="login"
@@ -151,6 +150,7 @@ export default function App() {
                 setCurrentTrainLoading,
               }}
               getCurrentTrain={getCurrentTrain}
+              areaInfo={areaInfo}
             />
           )}
         </Tab.Screen>
@@ -293,6 +293,7 @@ function MenuPage({
   currentTrainState,
   currentTrainLoadingState,
   getCurrentTrain,
+  areaInfo,
 }) {
   useEffect(() => {
     const unsubscribe = navigation.addListener("tabPress", (e) => {
@@ -327,6 +328,7 @@ function MenuPage({
             currentTrainState={currentTrainState}
             currentTrainLoadingState={currentTrainLoadingState}
             getCurrentTrain={getCurrentTrain}
+            areaInfo={areaInfo}
           />
         )}
       </Stack.Screen>

components/発車時刻表/LED_vidion.js

@@ -52,6 +52,7 @@ export default function LED_vision(props) {
     currentTrainState,
     currentTrainLoadingState,
     getCurrentTrain,
+    areaInfo,
   } = props;
   const { currentTrain, setCurrentTrain } = currentTrainState;
   const { currentTrainLoading, setCurrentTrainLoading } =
@@ -149,6 +150,33 @@ export default function LED_vision(props) {
     return false;
   };
 
+  const [areaString, setAreaString] = useState("");
+  const [areaStringLength, setAreaStringLength] = useState(0);
+  const [move, setMove] = useState(0);
+  useInterval(
+    () => {
+      if (areaInfo != "") {
+        if (areaStringLength < move) {
+          setMove(0);
+        } else {
+          setMove(move + 1);
+        }
+      }
+    },
+    350,
+    true
+  );
+  useEffect(() => {
+    setAreaString(
+      areaInfo.substring(move, areaInfo.length) + areaInfo.substring(0, move)
+    );
+  }, [move]);
+
+  useEffect(() => {
+    if (!areaInfo) return () => {};
+    setAreaStringLength(areaInfo.length);
+  }, [areaInfo]);
+
   return (
     <View
       style={{
@@ -176,6 +204,13 @@ export default function LED_vision(props) {
           EachTrainInfoAsSR={EachTrainInfoAsSR}
         />
       ))}
+      {areaString != "" && (
+        <Description
+          numberOfLines={1}
+          info={areaString.replace("\n", "").replace("\r", "")}
+        />
+      )}
+
       <Footer
         trainIDSwitch={trainIDSwitch}
         setTrainIDSwitch={setTrainIDSwitch}
@@ -413,7 +448,7 @@ const StatusAndDelay = ({ trainDelayStatus }) => {
   );
 };
 
-const Description = ({ info }) => (
+const Description = ({ info, numberOfLines = 0 }) => (
   <View
     style={{
       alignContent: "center",
@@ -432,6 +467,7 @@ const Description = ({ info }) => (
           color: "green",
           fontWeight: "bold",
         }}
+        numberOfLines={numberOfLines}
       >
         {" "}
         &gt; {info}

menu.js

@@ -49,6 +49,7 @@ export default function Menu(props) {
     currentTrainState,
     currentTrainLoadingState,
     getCurrentTrain,
+    areaInfo,
   } = props;
   const JRSTraInfoEXAcSR = useRef(null);
   const StationBoardAcSR = useRef(null);
@@ -255,6 +256,7 @@ export default function Menu(props) {
               currentTrainState={currentTrainState}
               currentTrainLoadingState={currentTrainLoadingState}
               getCurrentTrain={getCurrentTrain}
+              areaInfo={areaInfo}
             />
           )}
         <JRSTraInfoBox