positionBoxの移動

components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx

@@ -0,0 +1,97 @@
+import { trainPosition } from "@/lib/trainPositionTextArray";
+import React, { CSSProperties, FC } from "react";
+import { View, Text, StyleProp, TextStyle, ViewStyle } from "react-native";
+
+type stateBox = {
+  currentTrainData: any;
+  platformNumber: any;
+  title: string;
+  style?: ViewStyle;
+  mode?: number;
+  endText?: string;
+  lineNumber: string;
+};
+export const PositionBox: FC<stateBox> = (props) => {
+  const {
+    currentTrainData,
+    platformNumber,
+    title,
+    style,
+    mode,
+    endText,
+    lineNumber,
+  } = props;
+  const trainPositionText = (trainData) => {
+    const { isBetween, Pos: PosData } = trainPosition(trainData);
+    if (isBetween === true) {
+      const { from, to } = PosData;
+      return `${from}～${to}`;
+    } else {
+      const { Pos } = PosData;
+      if (Pos == "") return "";
+      if (platformNumber) return `${Pos} ${platformNumber}番乗り場`;
+      if (lineNumber) return `${Pos} ${lineNumber}番線`;
+    }
+  };
+  const text = trainPositionText(currentTrainData);
+  return (
+    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
+      <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
+      <View style={{ flex: 1 }} />
+      <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
+        {text?.match("～") ? (
+          <>
+            <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
+              {text.split("～")[0]}
+            </Text>
+            <Text style={{ color: "#0099CC", textAlign: "right" }}>
+              {mode == 2 ? "→" : "↓"}
+            </Text>
+            <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
+              {text.split("～")[1]}
+            </Text>
+          </>
+        ) : (
+          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
+        )}
+      </View>
+      {endText && (
+        <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
+          <Text
+            style={{
+              ...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
+              fontSize: 10,
+            }}
+          >
+            {endText}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+const boxStyle: ViewStyle = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 10,
+  margin: 10,
+};
+const boxStyle2: ViewStyle = {
+  flex: 1,
+  backgroundColor: "white",
+  borderRadius: 10,
+  padding: 5,
+  margin: 5,
+};
+const boxTextStyle2: TextStyle = {
+  fontSize: 18,
+  color: "#0099CC",
+  textAlign: "right",
+};
+
+const boxTextStyle: TextStyle = {
+  fontSize: 25,
+  color: "#0099CC",
+  textAlign: "right",
+};

components/ActionSheetComponents/EachTrainInfo/StateBox.tsx

@@ -15,21 +15,7 @@ export const StateBox: FC<stateBox> = (props) => {
       <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
       <View style={{ flex: 1 }} />
       <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
-        {text?.match("～") ? (
+        <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
-          <>
-            <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
-              {text.split("～")[0]}
-            </Text>
-            <Text style={{ color: "#0099CC", textAlign: "right" }}>
-              {mode == 2 ? "→" : "↓"}
-            </Text>
-            <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
-              {text.split("～")[1]}
-            </Text>
-          </>
-        ) : (
-          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
-        )}
       </View>
       {endText && (
         <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>

components/ActionSheetComponents/EachTrainInfo/TrainDataView.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { View, TouchableOpacity, useWindowDimensions } from "react-native";
 import { StateBox } from "./StateBox";
+import { PositionBox } from "./PositionBox";
 import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange";
 import { getStationList2 } from "../../../lib/getStationList";
 import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
@@ -53,14 +54,6 @@ export const TrainDataView = ({
     getStationList2().then(setMapsStationData);
   }, []);
   const onLine = !!currentPosition?.toString().length;
-  const trainPositionText = (trainData) => {
-    const { isBetween, Pos: PosData } = trainPosition(trainData);
-    const { from, to, Pos } = PosData;
-    if (isBetween === true) return `${from}～${to}`;
-    if (Pos == "") return "";
-    if (platformNumber) return `${Pos} ${platformNumber}番乗り場`;
-    if (lineNumber) return `${Pos} ${lineNumber}番線`;
-  };
   const [dialog, setDialog] = useState(false);
   const [deleteDialog, setDeleteDialog] = useState(false);
   const [posInput, setPosInput] = useState("");
@@ -148,10 +141,12 @@ export const TrainDataView = ({
             SheetManager.hide("EachTrainInfo");
           }}
         >
-          <StateBox
+          <PositionBox
             mode={mode}
             title={`現在地 ${currentPosition?.toString()}${onLine ? "▶️" : ""}`}
-            text={trainPositionText(currentTrainData)}
+            currentTrainData={currentTrainData}
+            platformNumber={platformNumber}
+            lineNumber={lineNumber}
             endText={platformDescription ? `${platformDescription}` : ""}
             style={
               onLine