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

Signの動作変更

Browse Source
This commit is contained in:
harukin-DeskMini 2023-01-27 22:59:29 +09:00
parent 67eed85c22
commit 690df1d2bc
1 changed files with 88 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
components/駅名表/Sign.js
View File

@ -16,6 +16,32 @@ import { useInterval } from "../../lib/useInterval";
export default function Sign(props) { export default function Sign(props) {
const { currentStation, originalStationList, oP } = props; const { currentStation, originalStationList, oP } = props;
const [nexPrePosition, setNexPrePosition] = useState(0);
const [preStation, setPreStation] = useState();
const [nexStation, setNexStation] = useState();
useInterval(() => {
if (currentStation.length == 1) {
setNexPrePosition(0);
return;
}
LayoutAnimation.easeInEaseOut();
setNexPrePosition(
nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
);
}, 2000);
useEffect(() => {
LayoutAnimation.easeInEaseOut();
setNexPrePosition(0);
getPreNextStation(currentStation[0]);
}, [currentStation]);
useEffect(() => {
LayoutAnimation.easeInEaseOut();
getPreNextStation(currentStation[nexPrePosition]);
}, [nexPrePosition]);
const getPreNextStation = (now) => { const getPreNextStation = (now) => {
const lineList = [ const lineList = [
"予讃線", "予讃線",
@ -40,16 +66,9 @@ export default function Sign(props) {
]; ];
} }
}); });
return returnData; setPreStation(returnData[0]);
setNexStation(returnData[1]);
}; };
const [nexPrePosition, setNexPrePosition] = useState(0);
useInterval(() => {
if (currentStation.length == 1) return;
LayoutAnimation.easeInEaseOut();
setNexPrePosition(
nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
);
}, 2000);
return ( return (
<TouchableOpacity style={styleSheet.外枠} onPress={oP}> <TouchableOpacity style={styleSheet.外枠} onPress={oP}>
<StationNumberMaker currentStation={currentStation} /> <StationNumberMaker currentStation={currentStation} />
@ -57,84 +76,80 @@ export default function Sign(props) {
<Text style={styleSheet.JRStyle}>JR</Text> <Text style={styleSheet.JRStyle}>JR</Text>
<View style={styleSheet.下帯} /> <View style={styleSheet.下帯} />
<View style={styleSheet.下帯内容}> <View style={styleSheet.下帯内容}>
{(() => { <NexPreStationLine preStation={preStation} nexStation={nexStation} />
let [preStation, nexStation] = getPreNextStation(
currentStation[nexPrePosition]
);
return (
<View style={styleSheet.下枠フレーム}>
<View style={styleSheet.下枠フレーム}>
{preStation && (
<>
<Text style={styleSheet.下枠左右マーク}>◀</Text>
{preStation.StationNumber && (
<View style={styleSheet.下枠駅ナンバー}>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: parseInt("10%"),
color: "white",
}}
>
{preStation.StationNumber}
</Text>
<View style={{ flex: 1 }} />
</View>
)}
<StationName
stringData={preStation}
ss={{ flex: 1, alignItems: "flex-start" }}
/>
</>
)}
</View>
<View style={styleSheet.下枠フレーム}>
{nexStation && (
<>
<StationName
stringData={nexStation}
ss={{ flex: 1, alignItems: "flex-end" }}
/>
{nexStation.StationNumber && (
<View style={styleSheet.下枠駅ナンバー}>
<View style={{ flex: 1 }} />
<Text
style={{ fontSize: parseInt("10%"), color: "white" }}
>
{nexStation.StationNumber}
</Text>
<View style={{ flex: 1 }} />
</View>
)}
<Text style={styleSheet.下枠左右マーク}>▶</Text>
</>
)}
</View>
</View>
);
})()}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
} }
const NexPreStationLine = ({ nexStation, preStation }) => {
return (
<View style={styleSheet.下枠フレーム}>
<View style={styleSheet.下枠フレーム}>
{preStation && (
<>
<Text style={styleSheet.下枠左右マーク}>◀</Text>
{preStation.StationNumber && (
<View style={styleSheet.下枠駅ナンバー}>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: parseInt("10%"),
color: "white",
}}
>
{preStation.StationNumber}
</Text>
<View style={{ flex: 1 }} />
</View>
)}
<StationName
stringData={preStation}
ss={{ flex: 1, alignItems: "flex-start" }}
/>
</>
)}
</View>
<View style={styleSheet.下枠フレーム}>
{nexStation && (
<>
<StationName
stringData={nexStation}
ss={{ flex: 1, alignItems: "flex-end" }}
/>
{nexStation.StationNumber && (
<View style={styleSheet.下枠駅ナンバー}>
<View style={{ flex: 1 }} />
<Text style={{ fontSize: parseInt("10%"), color: "white" }}>
{nexStation.StationNumber}
</Text>
<View style={{ flex: 1 }} />
</View>
)}
<Text style={styleSheet.下枠左右マーク}>▶</Text>
</>
)}
</View>
</View>
);
};
const StationNumberMaker = (props) => { const StationNumberMaker = (props) => {
const getTop = (array, index) => {
if (array.length == 1) return 20;
else if (index == 0) return 5;
else if (index == 1) return 35;
else return 20;
};
return props.currentStation return props.currentStation
.filter((d) => (d.StationNumber ? true : false)) .filter((d) => (d.StationNumber ? true : false))
.map((d, index, array) => ( .map((d, index, array) => (
<View <View
key={d + index}
style={{ style={{
position: "absolute", position: "absolute",
alignContent: "center", alignContent: "center",
alignItems: "center", alignItems: "center",
top: top: getTop(array, index) + "%",
(() => {
if (array.length == 1) return 20;
else if (index == 0) return 5;
else if (index == 1) return 35;
else return 20;
})() + "%",
right: "10%", right: "10%",
width: wp("10%"), width: wp("10%"),
height: wp("10%"), height: wp("10%"),