NextPreStationLineを移動
This commit is contained in:
harukin-expo-dev-env
parent
1d27a80776
commit
6cc5708ce0
104
components/駅名表/NextPreStationLine.tsx
Normal file
104
components/駅名表/NextPreStationLine.tsx
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
import React, { CSSProperties, FC } from "react";
|
||||||
|
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
|
||||||
|
import { Text, TextStyle, View, ViewStyle } from "react-native";
|
||||||
|
import { StationName } from "./StationName";
|
||||||
|
export const NextPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
|
||||||
|
return (
|
||||||
|
<View style={下枠フレーム}>
|
||||||
|
<View style={下枠フレーム}>
|
||||||
|
{!!preStation && (
|
||||||
|
<>
|
||||||
|
<BottomSideArrow isMatsuyama={isMatsuyama} children={"◀"} />
|
||||||
|
{!!preStation.StationNumber && (
|
||||||
|
<BottomStationNumberView
|
||||||
|
isMatsuyama={isMatsuyama}
|
||||||
|
children={preStation.StationNumber}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<StationName
|
||||||
|
stringData={preStation}
|
||||||
|
ss={{ flex: 1, alignItems: "flex-start" }}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
<View style={下枠フレーム}>
|
||||||
|
{!!nexStation && (
|
||||||
|
<>
|
||||||
|
<StationName
|
||||||
|
stringData={nexStation}
|
||||||
|
ss={{ flex: 1, alignItems: "flex-end" }}
|
||||||
|
/>
|
||||||
|
{!!nexStation.StationNumber && (
|
||||||
|
<BottomStationNumberView
|
||||||
|
isMatsuyama={isMatsuyama}
|
||||||
|
children={nexStation.StationNumber}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<BottomSideArrow isMatsuyama={isMatsuyama} children={"▶"} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
type FCimport = {
|
||||||
|
isMatsuyama: boolean;
|
||||||
|
children: string;
|
||||||
|
};
|
||||||
|
const BottomSideArrow: FC<FCimport> = ({ isMatsuyama, children }) => {
|
||||||
|
return !isMatsuyama && <Text style={下枠左右マーク}>{children}</Text>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const BottomStationNumberView: FC<FCimport> = ({ isMatsuyama, children }) => {
|
||||||
|
return (
|
||||||
|
<View style={isMatsuyama ? 下枠駅ナンバーB : 下枠駅ナンバー}>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: parseInt("10%"),
|
||||||
|
color: isMatsuyama ? "black" : "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const 下枠フレーム: ViewStyle = {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: "row",
|
||||||
|
alignContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
};
|
||||||
|
const 下枠左右マーク: TextStyle = {
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: parseInt("20%"),
|
||||||
|
color: "white",
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
textAlignVertical: "center",
|
||||||
|
};
|
||||||
|
const 下枠駅ナンバー: ViewStyle = {
|
||||||
|
alignContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
width: wp("8%"),
|
||||||
|
height: wp("8%"),
|
||||||
|
margin: wp("1%"),
|
||||||
|
borderColor: "white",
|
||||||
|
borderWidth: parseInt("2%"),
|
||||||
|
borderRadius: parseInt("100%"),
|
||||||
|
};
|
||||||
|
const 下枠駅ナンバーB: ViewStyle = {
|
||||||
|
alignContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
width: wp("7%"),
|
||||||
|
height: wp("7%"),
|
||||||
|
margin: wp("2%"),
|
||||||
|
borderColor: "black",
|
||||||
|
backgroundColor: "white",
|
||||||
|
borderWidth: parseInt("2%"),
|
||||||
|
borderRadius: parseInt("100%"),
|
||||||
|
};
|
||||||
@ -10,6 +10,7 @@ import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
|
|||||||
import { StationName } from "./StationName";
|
import { StationName } from "./StationName";
|
||||||
import { StationNameArea } from "./StationNameArea";
|
import { StationNameArea } from "./StationNameArea";
|
||||||
import { StationNumberMaker } from "./StationNumberMaker";
|
import { StationNumberMaker } from "./StationNumberMaker";
|
||||||
|
import { NextPreStationLine } from "./NextPreStationLine";
|
||||||
|
|
||||||
import lineColorList from "../../assets/originData/lineColorList";
|
import lineColorList from "../../assets/originData/lineColorList";
|
||||||
|
|
||||||
@ -173,11 +174,7 @@ export default function Sign(props) {
|
|||||||
<Text style={styleSheet.JRStyle}>JR</Text>
|
<Text style={styleSheet.JRStyle}>JR</Text>
|
||||||
<View style={styleSheet[isMatsuyama ? "下帯B" : "下帯"]} />
|
<View style={styleSheet[isMatsuyama ? "下帯B" : "下帯"]} />
|
||||||
<View style={styleSheet[isMatsuyama ? "下帯内容B" : "下帯内容"]}>
|
<View style={styleSheet[isMatsuyama ? "下帯内容B" : "下帯内容"]}>
|
||||||
<NexPreStationLine
|
<NextPreStationLine {...{ nexStation, preStation, isMatsuyama }} />
|
||||||
preStation={preStation}
|
|
||||||
nexStation={nexStation}
|
|
||||||
isMatsuyama={isMatsuyama}
|
|
||||||
/>
|
|
||||||
</View>
|
</View>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
);
|
);
|
||||||
@ -213,82 +210,6 @@ const LottieDelayView = ({
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
const NexPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
|
|
||||||
return (
|
|
||||||
<View style={styleSheet.下枠フレーム}>
|
|
||||||
<View style={styleSheet.下枠フレーム}>
|
|
||||||
{preStation ? (
|
|
||||||
<>
|
|
||||||
{!isMatsuyama && <Text style={styleSheet.下枠左右マーク}>◀</Text>}
|
|
||||||
{preStation.StationNumber ? (
|
|
||||||
<View
|
|
||||||
style={
|
|
||||||
isMatsuyama
|
|
||||||
? styleSheet.下枠駅ナンバーB
|
|
||||||
: styleSheet.下枠駅ナンバー
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: parseInt("10%"),
|
|
||||||
color: isMatsuyama ? "black" : "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={
|
|
||||||
isMatsuyama
|
|
||||||
? styleSheet.下枠駅ナンバーB
|
|
||||||
: styleSheet.下枠駅ナンバー
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: parseInt("10%"),
|
|
||||||
color: isMatsuyama ? "black" : "white",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{nexStation.StationNumber}
|
|
||||||
</Text>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
{!isMatsuyama && <Text style={styleSheet.下枠左右マーク}>▶</Text>}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const styleSheet = {
|
const styleSheet = {
|
||||||
外枠: {
|
外枠: {
|
||||||
@ -338,38 +259,4 @@ const styleSheet = {
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
},
|
},
|
||||||
下枠フレーム: {
|
|
||||||
flex: 1,
|
|
||||||
flexDirection: "row",
|
|
||||||
alignContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
下枠左右マーク: {
|
|
||||||
fontWeight: "bold",
|
|
||||||
fontSize: parseInt("20%"),
|
|
||||||
color: "white",
|
|
||||||
paddingHorizontal: 10,
|
|
||||||
textAlignVertical: "center",
|
|
||||||
},
|
|
||||||
下枠駅ナンバー: {
|
|
||||||
alignContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
width: wp("8%"),
|
|
||||||
height: wp("8%"),
|
|
||||||
margin: wp("1%"),
|
|
||||||
borderColor: "white",
|
|
||||||
borderWidth: parseInt("2%"),
|
|
||||||
borderRadius: parseInt("100%"),
|
|
||||||
},
|
|
||||||
下枠駅ナンバーB: {
|
|
||||||
alignContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
width: wp("7%"),
|
|
||||||
height: wp("7%"),
|
|
||||||
margin: wp("2%"),
|
|
||||||
borderColor: "black",
|
|
||||||
backgroundColor: "white",
|
|
||||||
borderWidth: parseInt("2%"),
|
|
||||||
borderRadius: parseInt("100%"),
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user