fixedTrainBoxのレイアウト変更
This commit is contained in:
harukin-expo-dev-env
@@ -19,6 +19,7 @@ import { findReversalPoints } from "@/lib/eachTrainInfoCoreLib/findReversalPoint
|
||||
import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
|
||||
import { getCurrentTrainData } from "@/lib/getCurrentTrainData";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
type props = {
|
||||
trainID: string;
|
||||
@@ -239,7 +240,9 @@ export const FixedTrain: FC<props> = ({
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: displaySize === 50 ? 1 : 5, flexDirection: "row" }}>
|
||||
<View
|
||||
style={{ flex: displaySize === 50 ? 1 : 5, flexDirection: "row" }}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: customTrainType.color,
|
||||
@@ -252,8 +255,8 @@ export const FixedTrain: FC<props> = ({
|
||||
>
|
||||
<Image
|
||||
source={{ uri: customData.img }}
|
||||
width={14}
|
||||
height={17}
|
||||
width={displaySize === 50 ? 14 : 22}
|
||||
height={displaySize === 50 ? 17 : 25}
|
||||
style={{ margin: 5 }}
|
||||
/>
|
||||
<View
|
||||
@@ -275,7 +278,7 @@ export const FixedTrain: FC<props> = ({
|
||||
marginTop: customTrainType.fontAvailable ? 3 : 0,
|
||||
color: "white",
|
||||
textAlignVertical: "center",
|
||||
textAlign: "center",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
{customTrainType.shortName}
|
||||
@@ -334,7 +337,7 @@ export const FixedTrain: FC<props> = ({
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
textAlignVertical: "center",
|
||||
@@ -480,7 +483,10 @@ export const FixedTrain: FC<props> = ({
|
||||
alignItems: "center",
|
||||
}}
|
||||
onPress={() => {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
|
||||
LayoutAnimation.configureNext({
|
||||
duration: 500,
|
||||
update: { type: "spring", springDamping: 0.7 },
|
||||
});
|
||||
if (displaySize === 50) {
|
||||
setDisplaySize(200);
|
||||
} else {
|
||||
@@ -556,6 +562,7 @@ const CurrentPositionBox = ({
|
||||
firstText = Pos;
|
||||
}
|
||||
}
|
||||
const delayTime = train?.delay == "入線" ? 0 : parseInt(train?.delay);
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
@@ -602,66 +609,94 @@ const CurrentPositionBox = ({
|
||||
if (!d) return null;
|
||||
if (d == "") return null;
|
||||
const [station, se, time] = d.split(",");
|
||||
let distanceMinute = 0;
|
||||
if (time != "") {
|
||||
const now = dayjs();
|
||||
const distanceTime = now
|
||||
.hour(time.split(":")[0])
|
||||
.minute(time.split(":")[1]);
|
||||
distanceMinute = distanceTime.diff(now, "minute") + delayTime;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{(index == 0 && secondText == "") || (
|
||||
<View
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "column",
|
||||
backgroundColor: "#6e6e6eff",
|
||||
borderRadius: 30,
|
||||
marginHorizontal: isSmall ? 2 : 4,
|
||||
marginVertical: isSmall ? 0 : 2,
|
||||
padding: isSmall ? 2 : 4,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
key={d + "CurrentPositionBox"}
|
||||
>
|
||||
{station.split("").map((i, index) => {
|
||||
return (
|
||||
<Text
|
||||
key={i + index}
|
||||
style={{
|
||||
fontSize: isSmall ? 5 : 12,
|
||||
color: "white",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{i}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
<View style={{ flex: 1 }} />
|
||||
{isSmall ||
|
||||
(time != "" && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: isSmall ? 8 : 14,
|
||||
color: "black",
|
||||
backgroundColor: "white",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{distanceMinute}
|
||||
</Text>
|
||||
))}
|
||||
<Text
|
||||
style={{
|
||||
flexDirection: "column",
|
||||
backgroundColor: "#6e6e6eff",
|
||||
borderRadius: 10,
|
||||
marginHorizontal: isSmall ? 2 : 4,
|
||||
marginVertical: isSmall ? 0 : 2,
|
||||
padding: isSmall ? 2 : 4,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
overflow: "hidden",
|
||||
fontSize: isSmall ? 8 : 14,
|
||||
color: se.includes("通") ? "#020202ff" : "white",
|
||||
marginTop: isSmall ? 0 : 3,
|
||||
}}
|
||||
key={d + "CurrentPositionBox"}
|
||||
>
|
||||
{station.split("").map((i, index) => {
|
||||
return (
|
||||
<Text
|
||||
key={i + index}
|
||||
style={{
|
||||
fontSize: isSmall ? 6 : 14,
|
||||
color: "white",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{i}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
style={{ fontSize: isSmall ? 8 : 14, color: "white" }}
|
||||
>
|
||||
{se.includes("通") ? "" : "●"}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{se.includes("通")
|
||||
? null
|
||||
: index == 1 && secondText == ""
|
||||
? "→"
|
||||
: "●"}
|
||||
</Text>
|
||||
</View>
|
||||
{index == 0 && secondText != "" && (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "column",
|
||||
backgroundColor: "#6e6e6e0e",
|
||||
borderRadius: 10,
|
||||
marginHorizontal: 2,
|
||||
padding: 2,
|
||||
marginHorizontal: isSmall ? 2 : 4,
|
||||
padding: isSmall ? 2 : 4,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
style={{ fontSize: isSmall ? 8 : 14, color: "black" }}
|
||||
>
|
||||
＞
|
||||
</Text>
|
||||
<Ionicons
|
||||
name="arrow-forward"
|
||||
size={isSmall ? 8 : 14}
|
||||
color="black"
|
||||
style={{ marginTop: isSmall ? 0 : 3 }}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user