312 lines
9.5 KiB
JavaScript
312 lines
9.5 KiB
JavaScript
import React, { Component, useRef, useState, useEffect } from "react";
|
|
import {
|
|
StatusBar,
|
|
View,
|
|
LayoutAnimation,
|
|
ScrollView,
|
|
Linking,
|
|
Text,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import {
|
|
widthPercentageToDP as wp,
|
|
heightPercentageToDP as hp,
|
|
} from "react-native-responsive-screen";
|
|
|
|
export default function Sign(props) {
|
|
const { currentStation, originalStationList, oP } = props;
|
|
const getPreNextStation = (now) => {
|
|
const lineList = [
|
|
"予讃線",
|
|
"松宇線",
|
|
"伊予灘線",
|
|
"土讃線",
|
|
"窪川線",
|
|
"高徳線",
|
|
"徳島線",
|
|
"鳴門線",
|
|
];
|
|
let returnData;
|
|
lineList.forEach((d) => {
|
|
let cache = originalStationList[d].findIndex(
|
|
(data) => data.StationNumber == now.StationNumber
|
|
);
|
|
if (cache != -1) {
|
|
returnData = [
|
|
originalStationList[d][cache - 1],
|
|
originalStationList[d][cache + 1],
|
|
];
|
|
}
|
|
});
|
|
return returnData;
|
|
};
|
|
const [nexPrePosition, setNexPrePosition] = useState(0);
|
|
useEffect(() => {
|
|
if (currentStation) {
|
|
if (currentStation.length > 1) {
|
|
let stationCount = setInterval(() => {
|
|
LayoutAnimation.easeInEaseOut();
|
|
if (nexPrePosition + 1 == currentStation.length) {
|
|
setNexPrePosition(0);
|
|
} else {
|
|
setNexPrePosition(nexPrePosition + 1);
|
|
}
|
|
}, 1000);
|
|
return () => clearInterval(stationCount);
|
|
}
|
|
}
|
|
}, [currentStation]);
|
|
return (
|
|
<TouchableOpacity
|
|
style={{
|
|
width: wp("80%"),
|
|
height: (wp("80%") / 20) * 9,
|
|
borderColor: "#2E94BB",
|
|
borderWidth: 1,
|
|
margin: 10,
|
|
marginHorizontal: wp("10%"),
|
|
}}
|
|
/* onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)} */ onPress={
|
|
oP
|
|
}
|
|
>
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
bottom: "0%",
|
|
left: "0%",
|
|
width: "100%",
|
|
height: "30%",
|
|
backgroundColor: "#2E94BB",
|
|
}}
|
|
/>
|
|
<Text
|
|
style={{
|
|
position: "absolute",
|
|
top: "2%",
|
|
left: "2%",
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("30%"),
|
|
color: "#2E94BB",
|
|
}}
|
|
>
|
|
JR
|
|
</Text>
|
|
{currentStation.map((d, index, array) => (
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
top:
|
|
(() => {
|
|
if (array.length == 1) return 20;
|
|
else if (index == 0) return 5;
|
|
else if (index == 1) return 35;
|
|
else return 20;
|
|
})() + "%",
|
|
right: "10%",
|
|
width: wp("10%"),
|
|
height: wp("10%"),
|
|
borderColor: "#2E94BB",
|
|
borderWidth: parseInt("2%"),
|
|
borderRadius: parseInt("100%"),
|
|
}}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text style={{ fontSize: parseInt("20%") }}>{d.StationNumber}</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</View>
|
|
))}
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
top: "10%",
|
|
alignContent: "center",
|
|
flexDirection: "row",
|
|
}}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<View style={{ alignItems: "center" }}>
|
|
{/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text> */}
|
|
<Text
|
|
style={{
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("40%"),
|
|
color: "#005170",
|
|
}}
|
|
>
|
|
{currentStation[0].Station_JP}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("15%"),
|
|
color: "#005170",
|
|
}}
|
|
>
|
|
{currentStation[0].Station_EN}
|
|
</Text>
|
|
</View>
|
|
<View style={{ flex: 1 }} />
|
|
</View>
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
bottom: "0%",
|
|
height: "30%",
|
|
width: "100%",
|
|
alignItems: "center",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
{(() => {
|
|
return currentStation.map((currentStation) => {
|
|
let [preStation, nexStation] = getPreNextStation(currentStation);
|
|
return (
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignContent: "center",
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignContent: "center",
|
|
}}
|
|
>
|
|
{preStation && [
|
|
<Text
|
|
style={{
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("20%"),
|
|
color: "white",
|
|
paddingHorizontal: 10,
|
|
textAlignVertical: "center",
|
|
}}
|
|
>
|
|
◀
|
|
</Text>,
|
|
<View
|
|
style={{
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
width: wp("8%"),
|
|
height: wp("8%"),
|
|
margin: wp("1%"),
|
|
borderColor: "white",
|
|
borderWidth: parseInt("2%"),
|
|
borderRadius: parseInt("100%"),
|
|
}}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text
|
|
style={{ fontSize: parseInt("10%"), color: "white" }}
|
|
>
|
|
{preStation.StationNumber}
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</View>,
|
|
<View style={{ flex: 1, alignItems: "flex-start" }}>
|
|
<Text
|
|
style={{
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("15%"),
|
|
color: "white",
|
|
flex: 1,
|
|
textAlignVertical: "center",
|
|
}}
|
|
>
|
|
{preStation.Station_JP}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("15%"),
|
|
color: "white",
|
|
flex: 1,
|
|
textAlignVertical: "center",
|
|
}}
|
|
>
|
|
{preStation.Station_EN}
|
|
</Text>
|
|
</View>,
|
|
]}
|
|
</View>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignContent: "center",
|
|
}}
|
|
>
|
|
{nexStation && [
|
|
<View style={{ flex: 1, alignItems: "flex-end" }}>
|
|
<Text
|
|
style={{
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("15%"),
|
|
color: "white",
|
|
flex: 1,
|
|
textAlignVertical: "center",
|
|
}}
|
|
>
|
|
{nexStation.Station_JP}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("15%"),
|
|
color: "white",
|
|
flex: 1,
|
|
textAlignVertical: "center",
|
|
}}
|
|
>
|
|
{nexStation.Station_EN}
|
|
</Text>
|
|
</View>,
|
|
<View
|
|
style={{
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
width: wp("8%"),
|
|
height: wp("8%"),
|
|
margin: wp("1%"),
|
|
borderColor: "white",
|
|
borderWidth: parseInt("2%"),
|
|
borderRadius: parseInt("100%"),
|
|
}}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text
|
|
style={{ fontSize: parseInt("10%"), color: "white" }}
|
|
>
|
|
{nexStation.StationNumber}
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</View>,
|
|
<Text
|
|
style={{
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("20%"),
|
|
color: "white",
|
|
paddingHorizontal: 10,
|
|
textAlignVertical: "center",
|
|
}}
|
|
>
|
|
▶
|
|
</Text>,
|
|
]}
|
|
</View>
|
|
</View>
|
|
);
|
|
})[nexPrePosition];
|
|
})()}
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|