拡大縮小ボタンの当たり判定を修正
This commit is contained in:
harukin-expo-dev-env
@@ -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