StationNumberMakerを移動
This commit is contained in:
parent
934e82f232
commit
e62ae0fc2d
@ -9,6 +9,7 @@ import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
|
||||
|
||||
import { StationName } from "./StationName";
|
||||
import { StationNameArea } from "./StationNameArea";
|
||||
import { StationNumberMaker } from "./StationNumberMaker";
|
||||
|
||||
import lineColorList from "../../assets/originData/lineColorList";
|
||||
|
||||
@ -246,50 +247,6 @@ const NexPreStationLine = ({ nexStation, preStation }) => {
|
||||
);
|
||||
};
|
||||
|
||||
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
|
||||
.filter((d) => (d.StationNumber ? true : false))
|
||||
.map((d, index, array) => {
|
||||
const lineID = d.StationNumber.slice(0, 1);
|
||||
const lineName = d.StationNumber.slice(1);
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
top: getTop(array, index) + "%",
|
||||
right: "10%",
|
||||
width: wp("10%"),
|
||||
height: wp("10%"),
|
||||
borderColor: lineColorList[lineID],
|
||||
borderWidth: parseInt("3%"),
|
||||
borderRadius: parseInt("100%"),
|
||||
}}
|
||||
key={array[index].StationNumber}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
style={{
|
||||
fontSize: parseInt("13%"),
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{lineID + "\n" + lineName}
|
||||
</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
</View>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
50
components/駅名表/StationNumberMaker.tsx
Normal file
50
components/駅名表/StationNumberMaker.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
|
||||
import React from "react";
|
||||
import { Text, View } from "react-native";
|
||||
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
|
||||
import lineColorList from "../../assets/originData/lineColorList";
|
||||
|
||||
export const StationNumberMaker = (props) => {
|
||||
const getTop = (array:number[], index:number) => {
|
||||
if (array.length == 1) return 20;
|
||||
else if (index == 0) return 5;
|
||||
else if (index == 1) return 35;
|
||||
else return 20;
|
||||
};
|
||||
return props.currentStation
|
||||
.filter((d) => (d.StationNumber ? true : false))
|
||||
.map((d, index, array) => {
|
||||
const lineID = d.StationNumber.slice(0, 1);
|
||||
const lineName = d.StationNumber.slice(1);
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
top: `${getTop(array, index)}%`,
|
||||
right: "10%",
|
||||
width: wp("10%"),
|
||||
height: wp("10%"),
|
||||
borderColor: lineColorList[lineID],
|
||||
borderWidth: parseInt("3%"),
|
||||
borderRadius: parseInt("100%"),
|
||||
}}
|
||||
key={array[index].StationNumber}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
style={{
|
||||
fontSize: parseInt("13%"),
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{lineID + "\n" + lineName}
|
||||
</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
</View>
|
||||
);
|
||||
});
|
||||
};
|
Loading…
Reference in New Issue
Block a user