回転判定の移動、コードの部分共通化

App.js

@@ -18,6 +18,7 @@ import { SheetProvider } from "react-native-actions-sheet";
 import "./components/ActionSheetComponents/sheets.js";
 import { TrainDelayDataProvider } from "./stateBox/useTrainDelayData.js";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import { DeviceOrientationChangeProvider } from "./stateBox/useDeviceOrientationChange.js";
 LogBox.ignoreLogs([
   "ViewPropTypes will be removed",
   "ColorPropType will be removed",
@@ -32,6 +33,7 @@ if (Platform.OS === "android") {
 export default function App() {
   useEffect(() => UpdateAsync(), []);
   return (
+    <DeviceOrientationChangeProvider>
       <SafeAreaProvider>
         <GestureHandlerRootView style={{ flex: 1 }}>
           <FavoriteStationProvider>
@@ -51,6 +53,7 @@ export default function App() {
           </FavoriteStationProvider>
         </GestureHandlerRootView>
       </SafeAreaProvider>
+    </DeviceOrientationChangeProvider>
   );
 }
 export function AppContainer() {

Apps.js

@@ -10,6 +10,7 @@ import {
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
 import { Ionicons } from "@expo/vector-icons";
+import * as Updates from "expo-updates";
 
 import { AS } from "./storageControl";
 import { news } from "./config/newsUpdate";
@@ -18,6 +19,7 @@ import { injectJavascriptData } from "./lib/webViewInjectjavascript";
 import { checkDuplicateTrainData } from "./lib/checkDuplicateTrainData";
 import { useFavoriteStation } from "./stateBox/useFavoriteStation";
 import { useCurrentTrain } from "./stateBox/useCurrentTrain";
+import { useDeviceOrientationChange } from "./stateBox/useDeviceOrientationChange";
 import { SheetManager } from "react-native-actions-sheet";
 import TrainMenu from "./components/trainMenu";
 import { EachTrainInfoCore } from "./components/ActionSheetComponents/EachTrainInfoCore";
@@ -31,16 +33,8 @@ export default function Apps({ navigation, webview, stationData }) {
   const { navigate } = navigation;
   var urlcache = "";
   const { favoriteStation } = useFavoriteStation();
-  const [isLandscape, setIsLandscape] = useState(false); //画面が横向きかどうか
+  const { isLandscape, setIsLandscape } = useDeviceOrientationChange();
   const handleLayout = () => {};
-  useEffect(() => {
-    if (height / width > 1.5) {
-      setIsLandscape(false);
-    }
-    if (height / width < 1.5) {
-      setIsLandscape(true);
-    }
-  }, [height, width]);
 
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);
@@ -70,6 +64,10 @@ export default function Apps({ navigation, webview, stationData }) {
     stationMenu,
     trainMenu
   );
+  const ASCore = ({ k, s, d }) =>
+    AS.getItem(k)
+      .then((d) => (d ? s(d) : AS.setItem(k, d).then(Updates.reloadAsync)))
+      .catch(() => AS.setItem(k, d).then(Updates.reloadAsync));
 
   useEffect(() => {
     //ニュース表示
@@ -82,67 +80,26 @@ export default function Apps({ navigation, webview, stationData }) {
 
   useEffect(() => {
     //列車アイコンスイッチ
-    AS.getItem("iconSwitch")
+    ASCore({ k: "iconSwitch", s: setIconSetting, d: "true" });
-      .then((d) => {
-        if (d) {
-          setIconSetting(d);
-        } else {
-          AS.setItem("iconSwitch", "true").then(Updates.reloadAsync);
-        }
-      })
-      .catch(() => AS.setItem("iconSwitch", "true").then(Updates.reloadAsync));
-  }, []);
-
-  useEffect(() => {
     //地図スイッチ
-    AS.getItem("mapSwitch")
+    ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false" });
-      .then((d) => {
-        if (d) {
-          setMapSwitch(d);
-        } else {
-          AS.setItem("mapSwitch", "false").then(Updates.reloadAsync);
-        }
-      })
-      .catch(() => AS.setItem("mapSwitch", "false").then(Updates.reloadAsync));
-  }, []);
-
-  useEffect(() => {
     //駅メニュースイッチ
-    AS.getItem("stationSwitch")
+    ASCore({ k: "stationSwitch", s: setStationMenu, d: "true" });
-      .then((d) => {
-        if (d) {
-          setStationMenu(d);
-        } else {
-          AS.setItem("stationSwitch", "true").then(Updates.reloadAsync);
-        }
-      })
-      .catch(() =>
-        AS.setItem("stationSwitch", "true").then(Updates.reloadAsync)
-      );
-  }, []);
-  useEffect(() => {
     //列車メニュースイッチ
-    AS.getItem("trainSwitch")
+    ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true" });
-      .then((d) => {
-        if (d) {
-          setTrainMenu(d);
-        } else {
-          AS.setItem("trainSwitch", "true").then(Updates.reloadAsync);
-        }
-      })
-      .catch(() => AS.setItem("trainSwitch", "true").then(Updates.reloadAsync));
   }, []);
 
   const onMessage = (event) => {
-    if (event.nativeEvent.data.includes("train.html")) {
+    const { data } = event.nativeEvent;
-      navigate("trainbase", { info: event.nativeEvent.data, from: "Train" });
+    if (data.includes("train.html")) {
+      navigate("trainbase", { info: data, from: "Train" });
       return;
     }
     if (!originalStationList) {
       alert("駅名標データを取得中...");
       return;
     }
-    const dataSet = JSON.parse(event.nativeEvent.data);
+    const dataSet = JSON.parse(data);
     switch (dataSet.type) {
       case "LoadError": {
         setLoadError(true);
@@ -151,12 +108,10 @@ export default function Apps({ navigation, webview, stationData }) {
       case "PopUpMenu":
         {
           const selectedStationPDFAddress = dataSet.pdf;
-          const findStationEachLine = (selectLine) => {
+          const findStationEachLine = (selectLine) =>
-            let NearStation = selectLine.filter(
+            selectLine.filter(
               (d) => d.StationTimeTable == selectedStationPDFAddress
             );
-            return NearStation;
-          };
           let returnDataBase = lineList
             .map((d) => findStationEachLine(originalStationList[d]))
             .filter((d) => d.length > 0)
@@ -175,13 +130,9 @@ export default function Apps({ navigation, webview, stationData }) {
                 SheetManager.show("StationDetailView", {
                   payload,
                 }),
-              onExit: () => {
+              onExit: () => SheetManager.hide("StationDetailView"),
-                SheetManager.hide("StationDetailView");
-              },
             };
-            SheetManager.show("StationDetailView", {
+            SheetManager.show("StationDetailView", { payload });
-              payload,
-            });
           }
         }
         return;

components/ActionSheetComponents/EachTrainInfo/TrainDataView.js

@@ -1,15 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
-import {
+import { View, TouchableOpacity, useWindowDimensions } from "react-native";
-  View,
-  Text,
-  TouchableOpacity,
-  useWindowDimensions,
-} from "react-native";
 import { StateBox } from "./StateBox";
-import {
+import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange";
-  heightPercentageToDP,
-  widthPercentageToDP,
-} from "react-native-responsive-screen";
 
 export const TrainDataView = ({
   currentTrainData,
@@ -18,16 +10,8 @@ export const TrainDataView = ({
   openTrainInfo,
   mode = 0,
 }) => {
-  const [isLandscape, setIsLandscape] = useState(false);
   const { width, height } = useWindowDimensions();
-  useEffect(() => {
+  const { isLandscape } = useDeviceOrientationChange();
-    if (height / width > 1.5) {
-      setIsLandscape(false);
-    }
-    if (height / width < 1.5) {
-      setIsLandscape(true);
-    }
-  }, [width, height]);
 
   return (
     <View

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -1,34 +1,30 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
 import {
   View,
   LayoutAnimation,
   Text,
   TouchableOpacity,
-  Platform,
   StyleSheet,
   useWindowDimensions,
+  BackHandler,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import ActionSheet, {
+import { SheetManager, useScrollHandlers } from "react-native-actions-sheet";
-  SheetManager,
-  useScrollHandlers,
-} from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
 import trainList from "../../assets/originData/trainList";
 import { lineList } from "../../lib/getStationList";
-import { heightPercentageToDP } from "react-native-responsive-screen";
 import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
 import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
 import { getTrainType } from "../../lib/getTrainType";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
+import { useDeviceOrientationChange } from "../../stateBox/useDeviceOrientationChange";
 import { EachStopList } from "./EachTrainInfo/EachStopList";
 import { DataFromButton } from "./EachTrainInfo/DataFromButton";
 import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
 import { LongHeader } from "./EachTrainInfo/LongHeader";
 import { ShortHeader } from "./EachTrainInfo/ShortHeader";
 import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
-import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";
 import { getStationData } from "../../lib/eachTrainInfoCoreLib/getStationData";
 import { findReversalPoints } from "../../lib/eachTrainInfoCoreLib/findReversalPoints";
 import { migrateTrainName } from "../../lib/eachTrainInfoCoreLib/migrateTrainName";
@@ -62,6 +58,17 @@ export const EachTrainInfoCore = ({
     );
   }, [currentTrain, data.trainNum]);
 
+  useEffect(() => {
+    const backAction = () => {
+      SheetManager.hide("EachTrainInfo");
+      return true;
+    };
+    const backHandler = BackHandler.addEventListener(
+      "hardwareBackPress",
+      backAction
+    );
+    return () => backHandler.remove();
+  }, []);
   //bconst insets = useSafeAreaInsets();
 
   const [headStation, setHeadStation] = useState();
@@ -107,7 +114,7 @@ export const EachTrainInfoCore = ({
       : [];
 
   const { height, width } = useWindowDimensions();
-  const [isLandscape, setIsLandscape] = useState(false);
+  const { isLandscape } = useDeviceOrientationChange();
 
   const [trueTrainID, setTrueTrainID] = useState();
   useEffect(() => {
@@ -167,15 +174,6 @@ export const EachTrainInfoCore = ({
     }
   }, [currentTrainData]);
 
-  useEffect(() => {
-    if (height / width > 1.5) {
-      setIsLandscape(false);
-    }
-    if (height / width < 1.5) {
-      setIsLandscape(true);
-    }
-  }, [width, height]);
-
   const replaceSpecialTrainDetail = (trainNum) => {
     let TD = trainList[trainNum];
     if (!TD) return;

components/ActionSheetComponents/JRSTraInfo.js

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import {
   View,
   LayoutAnimation,
@@ -7,9 +7,13 @@ import {
   Text,
   TouchableOpacity,
   Platform,
+  BackHandler,
 } from "react-native";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import ActionSheet, { useScrollHandlers } from "react-native-actions-sheet";
+import ActionSheet, {
+  SheetManager,
+  useScrollHandlers,
+} from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import ViewShot from "react-native-view-shot";
@@ -50,6 +54,7 @@ export const JRSTraInfo = () => {
       }
       useBottomSafeAreaPadding={Platform.OS == "android"}
     >
+      <Handler />
       <View
         style={{
           backgroundColor: "#0099CC",
@@ -206,3 +211,17 @@ export const JRSTraInfo = () => {
     </ActionSheet>
   );
 };
+const Handler = () => {
+  useEffect(() => {
+    const backAction = () => {
+      SheetManager.hide("JRSTraInfo");
+      return true;
+    };
+    const backHandler = BackHandler.addEventListener(
+      "hardwareBackPress",
+      backAction
+    );
+    return () => backHandler.remove();
+  }, []);
+  return <></>;
+};

components/ActionSheetComponents/StationDeteilView.js

@@ -1,9 +1,16 @@
 import React, { useState, useEffect } from "react";
-import { View, Linking, Text, TouchableOpacity, Platform } from "react-native";
+import {
+  View,
+  Linking,
+  Text,
+  TouchableOpacity,
+  BackHandler,
+  Platform,
+} from "react-native";
 import AutoHeightImage from "react-native-auto-height-image";
 import { FontAwesome, Foundation, Ionicons } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import ActionSheet from "react-native-actions-sheet";
+import ActionSheet, { SheetManager } from "react-native-actions-sheet";
 import Sign from "../../components/駅名表/Sign";
 
 import { TicketBox } from "../atom/TicketBox";
@@ -25,6 +32,7 @@ export const StationDeteilView = (props) => {
   } = props.payload;
   const { busAndTrainData } = useBusAndTrainData();
   const [trainBus, setTrainBus] = useState();
+
   useEffect(() => {
     if (!currentStation) return () => {};
     const data = busAndTrainData.filter((d) => {
@@ -60,6 +68,7 @@ export const StationDeteilView = (props) => {
       }
       useBottomSafeAreaPadding={Platform.OS == "android"}
     >
+      <Handler />
       <View
         key={currentStation}
         style={{
@@ -417,6 +426,20 @@ const 駅構内図 = (props) => {
   );
 };
 
+const Handler = () => {
+  useEffect(() => {
+    const backAction = () => {
+      SheetManager.hide("StationDetailView");
+      return true;
+    };
+    const backHandler = BackHandler.addEventListener(
+      "hardwareBackPress",
+      backAction
+    );
+    return () => backHandler.remove();
+  }, []);
+  return <></>;
+};
 const styleSheet = {
   外枠: {
     width: wp("80%"),

components/AndroidWidget/TraInfoEXWidget.jsx

@@ -65,13 +65,14 @@ export function TraInfoEXWidget({ time, delayString }) {
                   flexDirection: "row",
                   width: "match_parent",
                   backgroundColor: "#ffffff",
+                  flex: 1,
                 }}
                 clickAction="WIDGET_CLICK"
                 key={data[1]}
               >
-                <FlexText flex={15} text={data[0].replace("\n", "")} />
+                <FlexText flex={3} text={data[0].replace("\n", "")} />
-                <FlexText flex={5} text={data[1]} />
+                <FlexText flex={1} text={data[1]} />
-                <FlexText flex={6} text={data[3]} />
+                <FlexText flex={1} text={data[3]} />
               </FlexWidget>
             );
           })

stateBox/useDeviceOrientationChange.js

@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+import { useWindowDimensions } from "react-native";
+const initialState = { isLandscape: false, setIsLandscape: () => {} };
+
+const DeviceOrientationChange = createContext(initialState);
+
+export const useDeviceOrientationChange = () => {
+  return useContext(DeviceOrientationChange);
+};
+
+export const DeviceOrientationChangeProvider = ({ children }) => {
+  const [isLandscape, setIsLandscape] = useState(false);
+  const { height, width } = useWindowDimensions();
+
+  useEffect(() => {
+    if (height / width > 1.5) {
+      setIsLandscape(false);
+    }
+    if (height / width < 1.5) {
+      setIsLandscape(true);
+    }
+  }, [height, width]);
+  return (
+    <DeviceOrientationChange.Provider value={{ isLandscape, setIsLandscape }}>
+      {children}
+    </DeviceOrientationChange.Provider>
+  );
+};