レイアウト変更

components/Apps/FixedPositionBox/FixedStationBox.tsx

@@ -1,4 +1,5 @@
 import lineColorList from "@/assets/originData/lineColorList";
+import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker";
 import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
 import { useStationList, StationProps } from "@/stateBox/useStationList";
 import { useEffect, useState } from "react";
@@ -12,87 +13,92 @@ export const FixedStation = ({ stationID }) => {
     const data = getStationDataFromId(stationID);
     setStation(data);
   }, [stationID]);
-  console.log(station);
   const lineColor =
     station.length > 0
       ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
       : "white";
   return (
     <TouchableOpacity
-      style={{ flex: 1, flexDirection: "column" }}
+      style={{ flex: 1, flexDirection: "row" }}
       onPress={() => {
         setFixedPosition({ type: null, value: null });
       }}
     >
-      <View style={{ flex: 1, flexDirection: "row" }}>
+      <View
+        style={{
+          flex: 3,
+          flexDirection: "column",
+          alignContent: "center",
+          alignSelf: "center",
+          alignItems: "center",
+          height: "100%",
+          backgroundColor: "white",
+        }}
+      >
         <View
           style={{
-            paddingHorizontal: 5,
             backgroundColor: lineColor,
             flexDirection: "row",
+            width: "100%",
+
           }}
         >
-          {station.map((s) => {
-            if (s.StationNumber === null) return null;
-            return (
-              <View
-                key={s.StationNumber}
-                style={{
-                  flexDirection: "column",
-                  alignItems: "center",
-                  borderColor: lineColor,
-                  backgroundColor: "white",
-                  borderWidth: 1,
-                  borderRadius: 30,
-                  width: 25,
-                  height: 25,
-                }}
-              >
-                <Text style={{ fontSize: 10, margin: 0, padding: 0 }}>
-                  {s.StationNumber?.slice(0, 1)}
-                </Text>
-                <Text style={{ fontSize: 10, margin: 0, padding: 0 }}>
-                  {s.StationNumber?.slice(1)}
-                </Text>
-              </View>
-            );
-          })}
+          <StationNumberMaker
+            currentStation={station}
+            singleSize={20}
+            useEach={true}
+          />
+          <Text
+            style={{
+              fontSize: 20,
+              textAlignVertical: "center",
+              margin: 0,
+              padding: 0,
+              flex:1
+            }}
+          >
+            {station[0]?.Station_JP}
+          </Text>
+          <View
+            style={{
+              backgroundColor: "white",
+              width: 10,
+              borderLeftColor: lineColor,
+              borderBottomColor: "white",
+              borderBottomWidth: 24,
+              borderLeftWidth: 10,
+              borderRightWidth: 0,
+              borderTopWidth: 0,
+              height: "100%",
+            }}
+            />
         </View>
         <View
           style={{
-            backgroundColor: lineColor,
+            height: "100%",
+            backgroundColor: "white",
+            flex: 1,
           }}
         >
-          <Text style={{ fontSize: 20 }}>{station[0]?.Station_JP}</Text>
-        </View>
-        <View
-          style={{
-            backgroundColor: lineColor,
-            width: 10,
-            borderLeftColor: lineColor,
-            borderBottomColor: "white",
-            borderBottomWidth: 25,
-            borderLeftWidth: 10,
-            borderRightWidth: 0,
-            borderTopWidth: 0,
-          }}
-        ></View>
-        <View style={{ backgroundColor: "white", flex: 1 }}>
           <Text style={{ fontSize: 20 }}>駅情報固定中</Text>
         </View>
       </View>
 
       <View
         style={{
-          flex: 1,
-          flexDirection: "row",
+          flex: 5,
+          flexDirection: "column",
           backgroundColor: lineColor,
         }}
       >
+        
+        <View style={{ backgroundColor: "white", flex: 1 }}>
+          <Text style={{ fontSize: 20 }}>次：15:00 快速マリン　岡山</Text>
+        </View>
         <View style={{ backgroundColor: "white", flex: 1 }}>
           <Text style={{ fontSize: 20 }}>次：15:00 快速マリン　岡山</Text>
         </View>
       </View>
     </TouchableOpacity>
   );
-};
+};