列車運行情報のstateを最高位に移動

Apps.js

@@ -47,7 +47,7 @@ export default function Apps({
   const [trainInfo, setTrainInfo] = useState({
     trainNum: undefined,
     limited: undefined,
-    delay: undefined,
+    trainData: undefined,
   });
 
   //駅情報画面用
@@ -160,7 +160,7 @@ export default function Apps({
         setTrainInfo({
           trainNum,
           limited,
-          delay: currentTrain.filter((t) => t.num == trainNum)[0].delay,
+          trainData: currentTrain.filter((t) => t.num == trainNum)[0],
         }); //遅延情報は未実装
         EachTrainInfoAsSR.current?.show();
         return;

components/ActionSheetComponents/EachTrainInfo.js

@@ -38,6 +38,7 @@ export const EachTrainInfo = ({
     );
 
   useEffect(() => {
+    console.log(data);
     setIsTop(true);
     if (!data.trainNum) return;
     const TD = trainList[data.trainNum];
@@ -129,6 +130,64 @@ export const EachTrainInfo = ({
             setIsTop(e.nativeEvent.contentOffset.y < 0);
           }}
         >
+          <View style={{ flexDirection: "row" }}>
+            <View
+              style={{
+                flex: 1,
+                backgroundColor: "black",
+                borderRadius: 10,
+                padding: 10,
+                margin: 10,
+              }}
+            >
+              <Text style={{ fontSize: 10, color: "white" }} t>
+                現在地
+              </Text>
+              <View style={{ flex: 1 }} />
+              <Text
+                style={{ fontSize: 30, color: "white", textAlign: "right" }}
+              >
+                {data.trainData?.Pos}
+              </Text>
+            </View>
+            <View style={{ flex: 1, flexDirection: "column" }}>
+              <View
+                style={{
+                  flex: 1,
+                  backgroundColor: "black",
+                  borderRadius: 10,
+                  padding: 10,
+                  margin: 10,
+                }}
+              >
+                <Text style={{ fontSize: 10, color: "white" }}>
+                  {isNaN(data.trainData?.delay) ? "状態" : "遅延時分"}
+                </Text>
+                <Text
+                  style={{ fontSize: 30, color: "white", textAlign: "right" }}
+                >
+                  {data.trainData?.delay}
+                  {isNaN(data.trainData?.delay) ? "" : "分"}
+                </Text>
+              </View>
+              <View
+                style={{
+                  flex: 1,
+                  backgroundColor: "black",
+                  borderRadius: 10,
+                  padding: 10,
+                  margin: 10,
+                }}
+              >
+                <Text style={{ fontSize: 10, color: "white" }}>列番</Text>
+                <Text
+                  style={{ fontSize: 30, color: "white", textAlign: "right" }}
+                >
+                  {data.trainData?.num}
+                </Text>
+              </View>
+            </View>
+          </View>
           <View
             style={{
               padding: 10,
@@ -138,7 +197,6 @@ export const EachTrainInfo = ({
             }}
           >
             <View style={{ alignItems: "center" }}>
-              <Text>{data.delay}</Text>
               {/* <LottieView
                 autoPlay
                 loop

components/発車時刻表/LED_vidion.js

@@ -289,7 +289,7 @@ const EachData = ({
       limited: `${getTrainType(train.type).data}:${
         train.trainName
       }${TrainNumber}`,
-      delay: currentTrain.filter((t) => t.num == d.train)[0].delay,
+      trainData: currentTrain.filter((t) => t.num == d.train)[0],
     });
     EachTrainInfoAsSR.current?.show();
   };

menu.js

@@ -67,7 +67,7 @@ export default function Menu(props) {
   const [trainInfo, setTrainInfo] = useState({
     trainNum: undefined,
     limited: undefined,
-    delay: undefined,
+    trainData: undefined,
   });
 
   const getCurrentPosition = () => {