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) => 
+    const data = busAndTrainData.filter(
-      d.name === currentStation[0].Station_JP
+      (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 {
-import { Platform, Text, TextStyle, View, ViewStyle } from "react-native";
+  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 {
-import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+  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,69 +123,18 @@ export default function Sign(props) {
     }
     setTestButtonStatus(!testButtonStatus);
   };
-  return (
-    <TouchableOpacity
-      style={styleSheet[isMatsuyama ? "外枠B" : "外枠"]}
-      onPress={oP}
-      onLongPress={oLP}
-    >
-      {isMatsuyama && (
-        <LottieView
-          autoPlay
-          loop
-          style={{
-            width: wp("80%"),
-            height: (wp("80%") / 20) * 9,
-            backgroundColor: "#fff",
-          }}
-          source={require("../../assets/StationSign.json")}
-        />
-      )}
-      <StationNumberMaker
-        {...{ currentStation: currentStationData, isMatsuyama }}
-      />
-      <StationNameArea
-        {...{ currentStation: currentStationData, isMatsuyama }}
-      />
-      {isCurrentStation ? (
-        <View style={{ position: "absolute", right: 0, top: 0 }}>
-          <MaterialCommunityIcons
-            name="crosshairs-gps"
-            style={{ padding: 5 }}
-            color="#0099CC"
-            size={30}
-          />
-        </View>
-      ) : (
-        <TouchableOpacity
-          style={{ position: "absolute", right: -15, top: -20 }}
-          onPress={favoliteChanger}
-        >
-          <LottieDelayView progress={testButtonStatus ? 1 : 0} />
-        </TouchableOpacity>
-      )}
 
-      <Text style={styleSheet.JRStyle}>JR</Text>
+  const styleSheet = {
-      <View style={styleSheet[isMatsuyama ? "下帯B" : "下帯"]} />
-      <View style={styleSheet[isMatsuyama ? "下帯内容B" : "下帯内容"]}>
-        <NextPreStationLine {...{ nexStation, preStation, isMatsuyama }} />
-      </View>
-      <AddressText {...{ currentStation: currentStationData, isMatsuyama }} />
-    </TouchableOpacity>
-  );
-}
-
-const styleSheet = {
     外枠: {
-    width: wp("80%"),
+      width: width * 0.8,
-    height: (wp("80%") / 20) * 9,
+      height: ((width * 0.8) / 20) * 9,
       borderColor: "#0099CC",
       borderWidth: 1,
       backgroundColor: "white",
     },
     外枠B: {
-    width: wp("80%"),
+      width: width * 0.8,
-    height: (wp("80%") / 20) * 9,
+      height: ((width * 0.8) / 20) * 9,
       borderWidth: 0,
     },
     下帯: {
@@ -222,4 +177,56 @@ const styleSheet = {
       alignItems: "center",
       flexDirection: "column",
     },
-};
+  };
+
+  return (
+    <TouchableOpacity
+      style={styleSheet[isMatsuyama ? "外枠B" : "外枠"]}
+      onPress={oP}
+      onLongPress={oLP}
+    >
+      {isMatsuyama && (
+        <LottieView
+          autoPlay
+          loop
+          style={{
+            width: width * 0.8,
+            height: ((width * 0.8) / 20) * 9,
+            backgroundColor: "#fff",
+          }}
+          source={require("../../assets/StationSign.json")}
+        />
+      )}
+      <StationNumberMaker
+        {...{ currentStation: currentStationData, isMatsuyama }}
+      />
+      <StationNameArea
+        {...{ currentStation: currentStationData, isMatsuyama }}
+      />
+      {isCurrentStation ? (
+        <View style={{ position: "absolute", right: 0, top: 0 }}>
+          <MaterialCommunityIcons
+            name="crosshairs-gps"
+            style={{ padding: 5 }}
+            color="#0099CC"
+            size={30}
+          />
+        </View>
+      ) : (
+        <TouchableOpacity
+          style={{ position: "absolute", right: -15, top: -20 }}
+          onPress={favoliteChanger}
+        >
+          <LottieDelayView progress={testButtonStatus ? 1 : 0} />
+        </TouchableOpacity>
+      )}
+
+      <Text style={styleSheet.JRStyle}>JR</Text>
+      <View style={styleSheet[isMatsuyama ? "下帯B" : "下帯"]} />
+      <View style={styleSheet[isMatsuyama ? "下帯内容B" : "下帯内容"]}>
+        <NextPreStationLine {...{ nexStation, preStation, isMatsuyama }} />
+      </View>
+      <AddressText {...{ currentStation: currentStationData, isMatsuyama }} />
+    </TouchableOpacity>
+  );
+}

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