wpを削除して配置を変更

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) => {
         </View>
         <View>
           {currentStation && (
-            <View style={{ margin: 10, marginHorizontal: wp("10%") }}>
+            <View style={{ margin: 10, marginHorizontal: width * 0.1 }}>
               <Sign
                 stationID={currentStation[0].StationNumber}
                 oP={() => {

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 (
     <View style={下枠フレーム}>
       <View style={下枠フレーム}>
@@ -49,12 +62,40 @@ type FCimport = {
   children: string;
 };
 const BottomSideArrow: FC<FCimport> = ({ isMatsuyama, children }) => {
+  const 下枠左右マーク: TextStyle = {
+    fontWeight: "bold",
+    fontSize: parseInt("20%"),
+    color: "white",
+    paddingHorizontal: 5,
+    textAlignVertical: "center",
+  };
   return !isMatsuyama && <Text style={下枠左右マーク}>{children}</Text>;
 };
 
 const BottomStationNumberView: FC<FCimport> = ({ 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 (
     <View
       style={{
@@ -77,37 +118,3 @@ const BottomStationNumberView: FC<FCimport> = ({ isMatsuyama, children }) => {
     </View>
   );
 };
-
-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%"),
-};

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 (
     <TouchableOpacity
       style={styleSheet[isMatsuyama ? "外枠B" : "外枠"]}
@@ -128,8 +190,8 @@ export default function Sign(props) {
           autoPlay
           loop
           style={{
-            width: wp("80%"),
-            height: (wp("80%") / 20) * 9,
+            width: width * 0.8,
+            height: ((width * 0.8) / 20) * 9,
             backgroundColor: "#fff",
           }}
           source={require("../../assets/StationSign.json")}
@@ -168,58 +230,3 @@ export default function Sign(props) {
     </TouchableOpacity>
   );
 }
-
-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",
-  },
-};

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({