diff --git a/components/ActionSheetComponents/StationDeteilView.js b/components/ActionSheetComponents/StationDeteilView.js index aa8189c..17ce175 100644 --- a/components/ActionSheetComponents/StationDeteilView.js +++ b/components/ActionSheetComponents/StationDeteilView.js @@ -14,7 +14,6 @@ import ActionSheet, { SheetManager } from "react-native-actions-sheet"; import Sign from "../../components/駅名表/Sign"; import { TicketBox } from "../atom/TicketBox"; -import { widthPercentageToDP as wp } from "react-native-responsive-screen"; import { getPDFViewURL } from "../../lib/getPdfViewURL"; import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData"; import { AS } from "../../storageControl"; @@ -27,13 +26,14 @@ import { StationTimeTableButton } from "./StationDeteilView/StationTimeTableButt export const StationDeteilView = (props) => { if (!props.payload) return <>; const { currentStation, navigate, onExit, goTo, useShow } = props.payload; + const { width } = useWindowDimensions(); const { busAndTrainData } = useBusAndTrainData(); const [trainBus, setTrainBus] = useState(); useEffect(() => { if (!currentStation) return () => {}; - const data = busAndTrainData.filter((d) => - d.name === currentStation[0].Station_JP + const data = busAndTrainData.filter( + (d) => d.name === currentStation[0].Station_JP ); if (data.length == 0) { setTrainBus(); @@ -89,7 +89,7 @@ export const StationDeteilView = (props) => { {currentStation && ( - + { diff --git a/components/駅名表/NextPreStationLine.tsx b/components/駅名表/NextPreStationLine.tsx index 27843c3..269c79d 100644 --- a/components/駅名表/NextPreStationLine.tsx +++ b/components/駅名表/NextPreStationLine.tsx @@ -1,9 +1,22 @@ import React, { CSSProperties, FC } from "react"; -import { widthPercentageToDP as wp } from "react-native-responsive-screen"; -import { Platform, Text, TextStyle, View, ViewStyle } from "react-native"; +import { + Platform, + Text, + TextStyle, + useWindowDimensions, + View, + ViewStyle, +} from "react-native"; import { StationName } from "./StationName"; import lineColorList from "../../assets/originData/lineColorList"; export const NextPreStationLine = ({ nexStation, preStation, isMatsuyama }) => { + const 下枠フレーム: ViewStyle = { + flex: 1, + flexDirection: "row", + alignContent: "center", + alignItems: "center", + }; + return ( @@ -49,12 +62,40 @@ type FCimport = { children: string; }; const BottomSideArrow: FC = ({ isMatsuyama, children }) => { + const 下枠左右マーク: TextStyle = { + fontWeight: "bold", + fontSize: parseInt("20%"), + color: "white", + paddingHorizontal: 5, + textAlignVertical: "center", + }; return !isMatsuyama && {children}; }; const BottomStationNumberView: FC = ({ isMatsuyama, children }) => { + const { width } = useWindowDimensions(); const lineID = children.slice(0, 1); const lineName = children.slice(1); + const 下枠駅ナンバー: ViewStyle = { + alignContent: "center", + alignItems: "center", + width: width * 0.08, + height: width * 0.08, + margin: width * 0.01, + backgroundColor: "white", + borderWidth: parseInt("3%"), + borderRadius: parseInt("100%"), + }; + const 下枠駅ナンバーB: ViewStyle = { + alignContent: "center", + alignItems: "center", + width: width * 0.07, + height: width * 0.07, + margin: width * 0.02, + backgroundColor: "white", + borderWidth: parseInt("3%"), + borderRadius: parseInt("100%"), + }; return ( = ({ isMatsuyama, children }) => { ); }; - -const 下枠フレーム: ViewStyle = { - flex: 1, - flexDirection: "row", - alignContent: "center", - alignItems: "center", -}; -const 下枠左右マーク: TextStyle = { - fontWeight: "bold", - fontSize: parseInt("20%"), - color: "white", - paddingHorizontal: 5, - textAlignVertical: "center", -}; -const 下枠駅ナンバー: ViewStyle = { - alignContent: "center", - alignItems: "center", - width: wp("8%"), - height: wp("8%"), - margin: wp("1%"), - backgroundColor: "white", - borderWidth: parseInt("3%"), - borderRadius: parseInt("100%"), -}; -const 下枠駅ナンバーB: ViewStyle = { - alignContent: "center", - alignItems: "center", - width: wp("7%"), - height: wp("7%"), - margin: wp("2%"), - backgroundColor: "white", - borderWidth: parseInt("3%"), - borderRadius: parseInt("100%"), -}; diff --git a/components/駅名表/Sign.js b/components/駅名表/Sign.js index eb1b182..f7a3929 100644 --- a/components/駅名表/Sign.js +++ b/components/駅名表/Sign.js @@ -1,6 +1,10 @@ import React, { useRef, useState, useEffect, useLayoutEffect } from "react"; -import { View, Text, TouchableOpacity } from "react-native"; -import { widthPercentageToDP as wp } from "react-native-responsive-screen"; +import { + View, + Text, + TouchableOpacity, + useWindowDimensions, +} from "react-native"; import { MaterialCommunityIcons } from "@expo/vector-icons"; import LottieView from "lottie-react-native"; import { useInterval } from "../../lib/useInterval"; @@ -16,6 +20,8 @@ import { useStationList } from "../../stateBox/useStationList"; export default function Sign(props) { const { oP, oLP, isCurrentStation = false, stationID } = props; + + const { width, height } = useWindowDimensions(); const { getStationDataFromId } = useStationList(); if (!stationID) { return <>; @@ -117,6 +123,62 @@ export default function Sign(props) { } setTestButtonStatus(!testButtonStatus); }; + + const styleSheet = { + 外枠: { + width: width * 0.8, + height: ((width * 0.8) / 20) * 9, + borderColor: "#0099CC", + borderWidth: 1, + backgroundColor: "white", + }, + 外枠B: { + width: width * 0.8, + height: ((width * 0.8) / 20) * 9, + borderWidth: 0, + }, + 下帯: { + position: "absolute", + bottom: "8%", + left: "0%", + width: "100%", + height: "27%", + backgroundColor: "#0099CC", + }, + 下帯B: { + position: "absolute", + bottom: "0%", + left: "0%", + width: "100%", + height: "26%", + backgroundColor: "#454545", + }, + JRStyle: { + position: "absolute", + top: "2%", + left: "2%", + fontWeight: "bold", + fontSize: parseInt("25%"), + color: "#0099CC", + }, + 下帯内容: { + position: "absolute", + bottom: "8%", + height: "27%", + width: "100%", + alignItems: "center", + flexDirection: "column", + }, + 下帯内容B: { + position: "absolute", + bottom: "0%", + height: "26%", + width: "100%", + alignItems: "center", + flexDirection: "column", + }, + }; + return ( ); } - -const styleSheet = { - 外枠: { - width: wp("80%"), - height: (wp("80%") / 20) * 9, - borderColor: "#0099CC", - borderWidth: 1, - backgroundColor: "white", - }, - 外枠B: { - width: wp("80%"), - height: (wp("80%") / 20) * 9, - borderWidth: 0, - }, - 下帯: { - position: "absolute", - bottom: "8%", - left: "0%", - width: "100%", - height: "27%", - backgroundColor: "#0099CC", - }, - 下帯B: { - position: "absolute", - bottom: "0%", - left: "0%", - width: "100%", - height: "26%", - backgroundColor: "#454545", - }, - JRStyle: { - position: "absolute", - top: "2%", - left: "2%", - fontWeight: "bold", - fontSize: parseInt("25%"), - color: "#0099CC", - }, - 下帯内容: { - position: "absolute", - bottom: "8%", - height: "27%", - width: "100%", - alignItems: "center", - flexDirection: "column", - }, - 下帯内容B: { - position: "absolute", - bottom: "0%", - height: "26%", - width: "100%", - alignItems: "center", - flexDirection: "column", - }, -}; diff --git a/menu.js b/menu.js index 3a222f1..1e9bd93 100644 --- a/menu.js +++ b/menu.js @@ -57,6 +57,9 @@ export default function Menu({ // AS.setItem("stationListMode", "position"); }); }, []); + useEffect(()=>{ + alert(`height:${height}, width:${width}, bottom:${bottom}, left:${left}, right:${right}, top:${top}, tabBarHeight:${tabBarHeight}`); + }, [height, width, bottom, left, right, top, tabBarHeight]) const mapsRef = useRef(null); const returnToTop = (bool = true) => { scrollRef.current.scrollTo({