Merge commit 'ba65389596851e99fe0a3f4fad95b4fd6ea0448c' into develop
This commit is contained in:
harukin-expo-dev-env
@@ -1,5 +1,6 @@
|
||||
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
|
||||
import { View, Platform } from "react-native";
|
||||
import { useKeepAwake } from "expo-keep-awake";
|
||||
import Constants from "expo-constants";
|
||||
import { FixedTrain } from "./FixedPositionBox/FixedTrainBox";
|
||||
import { FixedStation } from "./FixedPositionBox/FixedStationBox";
|
||||
@@ -7,8 +8,9 @@ import { useState } from "react";
|
||||
|
||||
export const FixedPositionBox = () => {
|
||||
const { fixedPosition, setFixedPosition } = useCurrentTrain();
|
||||
const [displaySize, setDisplaySize] = useState(50);
|
||||
const [displaySize, setDisplaySize] = useState(76);
|
||||
|
||||
useKeepAwake();
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
@@ -20,6 +22,7 @@ export const FixedPositionBox = () => {
|
||||
height: displaySize,
|
||||
flexDirection: "row",
|
||||
}}
|
||||
pointerEvents="box-none"
|
||||
>
|
||||
{fixedPosition.type === "station" && (
|
||||
<FixedStation
|
||||
|
||||
@@ -97,234 +97,243 @@ export const FixedStation: FC<props> = ({
|
||||
}, [trainTimeAndNumber, currentTrain /*finalSwitch*/]);
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
borderBottomColor: lineColor,
|
||||
borderBottomWidth: 2,
|
||||
position: "relative",
|
||||
}}
|
||||
activeOpacity={1}
|
||||
onPress={() => {
|
||||
const payload = {
|
||||
currentStation: station,
|
||||
navigate,
|
||||
goTo: "menu",
|
||||
onExit: () => SheetManager.hide("StationDetailView"),
|
||||
};
|
||||
//@ts-ignore
|
||||
SheetManager.show("StationDetailView", { payload });
|
||||
}}
|
||||
<View
|
||||
style={{ display: "flex", flexDirection: "column", flex: 1 }}
|
||||
pointerEvents="box-none"
|
||||
>
|
||||
<View
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flex: 3,
|
||||
flexDirection: "column",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
backgroundColor: "white",
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
borderBottomColor: lineColor,
|
||||
borderBottomWidth: 2,
|
||||
position: "relative",
|
||||
}}
|
||||
activeOpacity={1}
|
||||
onPress={() => {
|
||||
const payload = {
|
||||
currentStation: station,
|
||||
navigate,
|
||||
goTo: "menu",
|
||||
onExit: () => SheetManager.hide("StationDetailView"),
|
||||
};
|
||||
//@ts-ignore
|
||||
SheetManager.show("StationDetailView", { payload });
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: lineColor,
|
||||
flexDirection: "row",
|
||||
width: "100%",
|
||||
flex: 3,
|
||||
flexDirection: "column",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
height: 22,
|
||||
overflow: "hidden",
|
||||
paddingLeft: 5,
|
||||
height: "100%",
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
>
|
||||
<StationNumberMaker
|
||||
currentStation={station}
|
||||
singleSize={18}
|
||||
useEach={true}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
textAlignVertical: "center",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
paddingLeft: 5,
|
||||
flex: 1,
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
{station[0]?.Station_JP}
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: lineColor,
|
||||
flexDirection: "row",
|
||||
width: "100%",
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
height: 22,
|
||||
overflow: "hidden",
|
||||
paddingLeft: 5,
|
||||
}}
|
||||
>
|
||||
<StationNumberMaker
|
||||
currentStation={station}
|
||||
singleSize={18}
|
||||
useEach={true}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
textAlignVertical: "center",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
paddingLeft: 5,
|
||||
flex: 1,
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
{station[0]?.Station_JP}
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: 6,
|
||||
borderLeftColor: lineColor,
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: "white",
|
||||
borderRightColor: "white",
|
||||
borderBottomWidth: 18,
|
||||
borderLeftWidth: 10,
|
||||
borderRightWidth: 0,
|
||||
borderTopWidth: 5,
|
||||
height: 20,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
height: "100%",
|
||||
backgroundColor: "white",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 18 }}>次の発車予定：</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
flex: 5,
|
||||
flexDirection: "column",
|
||||
backgroundColor: "white",
|
||||
borderTopWidth: 5,
|
||||
borderTopColor: lineColor,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{selectedTrain.length > 0 ? (
|
||||
selectedTrain.map((d) => (
|
||||
<FixedStationBoxEachTrain
|
||||
d={d}
|
||||
station={station[0]}
|
||||
displaySize={displaySize}
|
||||
key={d.train + "-fixedStationBox"}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<View style={{ backgroundColor: "white", flex: 1 }}>
|
||||
<Text style={{ fontSize: parseInt("11%") }}>
|
||||
当駅を発着する走行中の列車はありません。
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
borderTopColor: lineColor,
|
||||
borderTopWidth: 2,
|
||||
}}
|
||||
pointerEvents="box-none"
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
onPress={() => {
|
||||
setFixedPosition({ type: null, value: null });
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: lineColor,
|
||||
paddingHorizontal: 5,
|
||||
height: 26,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="lock-closed" size={15} color="white" />
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: 15,
|
||||
paddingRight: 5,
|
||||
}}
|
||||
>
|
||||
駅位置ロック中
|
||||
</Text>
|
||||
<Ionicons name="close" size={15} color="white" />
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#0000",
|
||||
width: 6,
|
||||
borderLeftColor: lineColor,
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: "white",
|
||||
borderRightColor: "white",
|
||||
borderBottomWidth: 18,
|
||||
borderBottomColor: "#0000",
|
||||
borderRightColor: "#0000",
|
||||
borderBottomWidth: 26,
|
||||
borderLeftWidth: 10,
|
||||
borderRightWidth: 0,
|
||||
borderTopWidth: 5,
|
||||
height: 20,
|
||||
borderTopWidth: 0,
|
||||
height: 26,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
height: "100%",
|
||||
backgroundColor: "white",
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
onPress={() => {
|
||||
LayoutAnimation.configureNext({
|
||||
duration: 500,
|
||||
update: { type: "spring", springDamping: 0.7 },
|
||||
});
|
||||
if (displaySize === 76) {
|
||||
setDisplaySize(226);
|
||||
} else {
|
||||
setDisplaySize(76);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 18 }}>次の発車予定：</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
flex: 5,
|
||||
flexDirection: "column",
|
||||
backgroundColor: "white",
|
||||
borderTopWidth: 5,
|
||||
borderTopColor: lineColor,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{selectedTrain.length > 0 ? (
|
||||
selectedTrain.map((d) => (
|
||||
<FixedStationBoxEachTrain
|
||||
d={d}
|
||||
station={station[0]}
|
||||
displaySize={displaySize}
|
||||
key={d.train + "-fixedStationBox"}
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#0000",
|
||||
width: 6,
|
||||
borderLeftColor: "#0000",
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: "#0000",
|
||||
borderRightColor: lineColor,
|
||||
borderBottomWidth: 26,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 10,
|
||||
borderTopWidth: 0,
|
||||
height: 26,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: lineColor,
|
||||
paddingHorizontal: 5,
|
||||
height: 26,
|
||||
}}
|
||||
pointerEvents="none"
|
||||
>
|
||||
<Ionicons
|
||||
name={displaySize == 76 ? "chevron-down" : "chevron-up"}
|
||||
size={15}
|
||||
color="white"
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<View style={{ backgroundColor: "white", flex: 1 }}>
|
||||
<Text style={{ fontSize: parseInt("11%") }}>
|
||||
当駅を発着する走行中の列車はありません。
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
paddingRight: 5,
|
||||
backgroundColor: lineColor,
|
||||
fontSize: 15,
|
||||
}}
|
||||
>
|
||||
{displaySize == 76 ? "時刻表を展開する" : "時刻表を縮小する"}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "100%",
|
||||
left: 0,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
onPress={() => {
|
||||
setFixedPosition({ type: null, value: null });
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: lineColor,
|
||||
paddingHorizontal: 5,
|
||||
height: 26,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="lock-closed" size={15} color="white" />
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: 15,
|
||||
paddingRight: 5,
|
||||
}}
|
||||
>
|
||||
駅位置ロック中
|
||||
</Text>
|
||||
<Ionicons name="close" size={15} color="white" />
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#0000",
|
||||
width: 6,
|
||||
borderLeftColor: lineColor,
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: "#0000",
|
||||
borderRightColor: "#0000",
|
||||
borderBottomWidth: 26,
|
||||
borderLeftWidth: 10,
|
||||
borderRightWidth: 0,
|
||||
borderTopWidth: 0,
|
||||
height: 26,
|
||||
}}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "100%",
|
||||
right: 0,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
onPress={() => {
|
||||
LayoutAnimation.configureNext({
|
||||
duration: 500,
|
||||
update: { type: "spring", springDamping: 0.7 },
|
||||
});
|
||||
if (displaySize === 50) {
|
||||
setDisplaySize(200);
|
||||
} else {
|
||||
setDisplaySize(50);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#0000",
|
||||
width: 6,
|
||||
borderLeftColor: "#0000",
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: "#0000",
|
||||
borderRightColor: lineColor,
|
||||
borderBottomWidth: 26,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 10,
|
||||
borderTopWidth: 0,
|
||||
height: 26,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: lineColor,
|
||||
paddingHorizontal: 5,
|
||||
height: 26,
|
||||
}}
|
||||
pointerEvents="none"
|
||||
>
|
||||
<Ionicons
|
||||
name={displaySize == 50 ? "chevron-down" : "chevron-up"}
|
||||
size={15}
|
||||
color="white"
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
paddingRight: 5,
|
||||
backgroundColor: lineColor,
|
||||
fontSize: 15,
|
||||
}}
|
||||
>
|
||||
{displaySize == 50 ? "時刻表を展開する" : "時刻表を縮小する"}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -353,7 +362,7 @@ const FixedStationBoxEachTrain = ({ d, station, displaySize }) => {
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
flexDirection: "row",
|
||||
height: displaySize == 50 ? "33%" : "7.5%",
|
||||
height: displaySize == 76 ? "33%" : "7.5%",
|
||||
overflow: "visible",
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -215,322 +215,331 @@ export const FixedTrain: FC<props> = ({
|
||||
}`;
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: displaySize === 50 ? "row" : "column",
|
||||
backgroundColor: "black",
|
||||
borderBottomColor: "black",
|
||||
borderBottomWidth: 2,
|
||||
position: "relative",
|
||||
}}
|
||||
style={{ display: "flex", flexDirection: "column", flex: 1 }}
|
||||
pointerEvents="box-none"
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: displaySize === 50 ? "column" : "row",
|
||||
flex: 1,
|
||||
backgroundColor: "white",
|
||||
height: displaySize === 50 ? 50 : 200,
|
||||
overflow: "hidden",
|
||||
flexDirection: displaySize === 76 ? "row" : "column",
|
||||
backgroundColor: "black",
|
||||
//borderBottomColor: "black",
|
||||
//borderBottomWidth: 2,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{ flex: displaySize === 50 ? 1 : 5, flexDirection: "row" }}
|
||||
style={{
|
||||
flexDirection: displaySize === 76 ? "column" : "row",
|
||||
flex: 1,
|
||||
backgroundColor: "white",
|
||||
height: displaySize === 76 ? 50 : 200,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: customTrainType.color,
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
}}
|
||||
style={{ flex: displaySize === 76 ? 1 : 5, flexDirection: "row" }}
|
||||
>
|
||||
<Image
|
||||
source={{ uri: customData.img }}
|
||||
width={displaySize === 50 ? 14 : 23}
|
||||
height={displaySize === 50 ? 17 : 26}
|
||||
style={{ margin: 5 }}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: displaySize === 50 ? "row" : "column",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
maxWidth: displaySize === 50 ? 100 : 60,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontFamily: customTrainType.fontAvailable
|
||||
? "JR-Nishi"
|
||||
: undefined,
|
||||
fontWeight: !customTrainType.fontAvailable
|
||||
? "bold"
|
||||
: undefined,
|
||||
marginTop: customTrainType.fontAvailable ? 3 : 0,
|
||||
color: "white",
|
||||
textAlignVertical: "center",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
{customTrainType.shortName}
|
||||
</Text>
|
||||
{customData.trainName && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: trainNameText.length > 6 ? 8 : 14,
|
||||
color: "white",
|
||||
maxWidth: displaySize === 50 ? 60 : 200,
|
||||
textAlignVertical: "center",
|
||||
}}
|
||||
>
|
||||
{trainNameText}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: customTrainType.color,
|
||||
width: 10,
|
||||
borderLeftColor: customTrainType.color,
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: lineColor,
|
||||
borderTopWidth: displaySize === 50 ? 14 : 50,
|
||||
borderBottomWidth: displaySize === 50 ? 14 : 50,
|
||||
borderLeftWidth: displaySize === 50 ? 10 : 30,
|
||||
borderRightWidth: 0,
|
||||
//height: displaySize === 50 ? 20 : 100,
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
}}
|
||||
></View>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
height: "100%",
|
||||
backgroundColor: lineColor,
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
>
|
||||
<Image
|
||||
source={{ uri: customData.img }}
|
||||
width={displaySize === 76 ? 14 : 23}
|
||||
height={displaySize === 76 ? 17 : 26}
|
||||
style={{ margin: 5 }}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: displaySize === 76 ? "row" : "column",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
maxWidth: displaySize === 76 ? 100 : 60,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontFamily: customTrainType.fontAvailable
|
||||
? "JR-Nishi"
|
||||
: undefined,
|
||||
fontWeight: !customTrainType.fontAvailable
|
||||
? "bold"
|
||||
: undefined,
|
||||
marginTop: customTrainType.fontAvailable ? 3 : 0,
|
||||
color: "white",
|
||||
textAlignVertical: "center",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
{customTrainType.shortName}
|
||||
</Text>
|
||||
{customData.trainName && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: trainNameText.length > 6 ? 8 : 14,
|
||||
color: "white",
|
||||
maxWidth: displaySize === 76 ? 60 : 200,
|
||||
textAlignVertical: "center",
|
||||
}}
|
||||
>
|
||||
{trainNameText}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: customTrainType.color,
|
||||
width: 10,
|
||||
borderLeftColor: customTrainType.color,
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: lineColor,
|
||||
borderTopWidth: displaySize === 76 ? 14 : 50,
|
||||
borderBottomWidth: displaySize === 76 ? 14 : 50,
|
||||
borderLeftWidth: displaySize === 76 ? 10 : 30,
|
||||
borderRightWidth: 0,
|
||||
//height: displaySize === 76 ? 20 : 100,
|
||||
height: "100%",
|
||||
}}
|
||||
></View>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
backgroundColor: lineColor,
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<StationNumberMaker
|
||||
currentStation={station}
|
||||
singleSize={18}
|
||||
useEach={true}
|
||||
/>
|
||||
<Text
|
||||
<View
|
||||
style={{
|
||||
fontSize: customData?.ToData?.length > 4 ? 9 : 12,
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
textAlignVertical: "center",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
height: "100%",
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{ToData}行
|
||||
</Text>
|
||||
<StationNumberMaker
|
||||
currentStation={station}
|
||||
singleSize={18}
|
||||
useEach={true}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: customData?.ToData?.length > 4 ? 9 : 12,
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
textAlignVertical: "center",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{ToData}行
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{displaySize === 200 && (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: 10,
|
||||
borderLeftColor: "black",
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: "white",
|
||||
borderRightColor: "black",
|
||||
borderTopWidth: 50,
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 20,
|
||||
}}
|
||||
></View>
|
||||
)}
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "black",
|
||||
flex: displaySize === 50 ? 1 : 4,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 10,
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
marginHorizontal: 5,
|
||||
}}
|
||||
>
|
||||
{nextStationData[0]?.Station_JP == train?.Pos ? "ただいま" : "次は"}
|
||||
</Text>
|
||||
<StationNumberMaker
|
||||
currentStation={nextStationData}
|
||||
singleSize={20}
|
||||
useEach={true}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{nextStationData[0]?.Station_JP || "不明"}
|
||||
</Text>
|
||||
{displaySize === 50 && (
|
||||
{displaySize === 226 && (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: 10,
|
||||
borderLeftColor: "black",
|
||||
borderTopColor: "black",
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: "white",
|
||||
borderRightColor: "white",
|
||||
borderTopWidth: 21,
|
||||
borderRightColor: "black",
|
||||
borderTopWidth: 50,
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 7,
|
||||
borderRightWidth: 20,
|
||||
}}
|
||||
></View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<CurrentPositionBox
|
||||
train={train}
|
||||
lineColor={lineColor}
|
||||
trainDataWithThrough={untilStationData}
|
||||
isSmall={displaySize === 50}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "100%",
|
||||
left: 0,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
onPress={() => {
|
||||
setFixedPosition({ type: null, value: null });
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "black",
|
||||
paddingHorizontal: 5,
|
||||
height: 26,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="lock-closed" size={15} color="white" />
|
||||
<Text
|
||||
<View
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: 15,
|
||||
paddingRight: 5,
|
||||
}}
|
||||
>
|
||||
列車追跡中
|
||||
</Text>
|
||||
<Ionicons name="close" size={15} color="white" />
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#0000",
|
||||
width: 6,
|
||||
borderLeftColor: "black",
|
||||
borderTopColor: "black",
|
||||
borderBottomColor: "#0000",
|
||||
borderRightColor: "#0000",
|
||||
borderBottomWidth: 26,
|
||||
borderLeftWidth: 10,
|
||||
borderRightWidth: 0,
|
||||
borderTopWidth: 0,
|
||||
height: 26,
|
||||
}}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "100%",
|
||||
right: 0,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
onPress={() => {
|
||||
LayoutAnimation.configureNext({
|
||||
duration: 500,
|
||||
update: { type: "spring", springDamping: 0.7 },
|
||||
});
|
||||
if (displaySize === 50) {
|
||||
setDisplaySize(200);
|
||||
} else {
|
||||
setDisplaySize(50);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#0000",
|
||||
width: 6,
|
||||
borderLeftColor: "#0000",
|
||||
borderTopColor: "black",
|
||||
borderBottomColor: "#0000",
|
||||
borderRightColor: "black",
|
||||
borderBottomWidth: 26,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 10,
|
||||
borderTopWidth: 0,
|
||||
height: 26,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "black",
|
||||
paddingHorizontal: 5,
|
||||
height: 26,
|
||||
}}
|
||||
pointerEvents="none"
|
||||
>
|
||||
<Ionicons
|
||||
name={displaySize == 50 ? "chevron-down" : "chevron-up"}
|
||||
size={15}
|
||||
color="white"
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
paddingRight: 5,
|
||||
backgroundColor: "black",
|
||||
fontSize: 15,
|
||||
flex: displaySize === 76 ? 1 : 4,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{displaySize == 50 ? "列車情報展開" : "列車情報縮小"}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 10,
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
marginHorizontal: 5,
|
||||
}}
|
||||
>
|
||||
{nextStationData[0]?.Station_JP == train?.Pos
|
||||
? "ただいま"
|
||||
: "次は"}
|
||||
</Text>
|
||||
<StationNumberMaker
|
||||
currentStation={nextStationData}
|
||||
singleSize={20}
|
||||
useEach={true}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{nextStationData[0]?.Station_JP || "不明"}
|
||||
</Text>
|
||||
{displaySize === 76 && (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: 10,
|
||||
borderLeftColor: "black",
|
||||
borderTopColor: "black",
|
||||
borderBottomColor: "white",
|
||||
borderRightColor: "white",
|
||||
borderTopWidth: 21,
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 7,
|
||||
}}
|
||||
></View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<CurrentPositionBox
|
||||
train={train}
|
||||
lineColor={lineColor}
|
||||
trainDataWithThrough={untilStationData}
|
||||
isSmall={displaySize === 76}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
borderTopColor: "black",
|
||||
borderTopWidth: 2,
|
||||
}}
|
||||
pointerEvents="box-none"
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
onPress={() => {
|
||||
setFixedPosition({ type: null, value: null });
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "black",
|
||||
paddingHorizontal: 5,
|
||||
height: 26,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="lock-closed" size={15} color="white" />
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: 15,
|
||||
paddingRight: 5,
|
||||
}}
|
||||
>
|
||||
列車追跡中
|
||||
</Text>
|
||||
<Ionicons name="close" size={15} color="white" />
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#0000",
|
||||
width: 6,
|
||||
borderLeftColor: "black",
|
||||
borderTopColor: "black",
|
||||
borderBottomColor: "#0000",
|
||||
borderRightColor: "#0000",
|
||||
borderBottomWidth: 26,
|
||||
borderLeftWidth: 10,
|
||||
borderRightWidth: 0,
|
||||
borderTopWidth: 0,
|
||||
height: 26,
|
||||
}}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
onPress={() => {
|
||||
LayoutAnimation.configureNext({
|
||||
duration: 200,
|
||||
update: { type: "easeInEaseOut", springDamping: 0.4 },
|
||||
});
|
||||
if (displaySize === 76) {
|
||||
setDisplaySize(226);
|
||||
} else {
|
||||
setDisplaySize(76);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#0000",
|
||||
width: 6,
|
||||
borderLeftColor: "#0000",
|
||||
borderTopColor: "black",
|
||||
borderBottomColor: "#0000",
|
||||
borderRightColor: "black",
|
||||
borderBottomWidth: 26,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 10,
|
||||
borderTopWidth: 0,
|
||||
height: 26,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "black",
|
||||
paddingHorizontal: 5,
|
||||
height: 26,
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name={displaySize == 76 ? "chevron-down" : "chevron-up"}
|
||||
size={15}
|
||||
color="white"
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
paddingRight: 5,
|
||||
backgroundColor: "black",
|
||||
fontSize: 15,
|
||||
}}
|
||||
>
|
||||
{displaySize == 76 ? "列車情報展開" : "列車情報縮小"}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user