harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixedTrainBoxのレイアウト変更

Browse Source
This commit is contained in:
harukin-expo-dev-env
2025-09-16 11:29:05 +00:00
parent 2fe525d620
commit 85fd66b728
1 changed files with 84 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
components/Apps/FixedPositionBox/FixedTrainBox.tsx
View File

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