From e1e35168d6c5b6b17d53f13e84f9eb1fb043507d Mon Sep 17 00:00:00 2001 From: harukin-expo-dev-env Date: Sat, 9 Mar 2024 11:02:52 +0000 Subject: [PATCH] =?UTF-8?q?=E5=9B=9E=E8=BB=A2=E5=88=A4=E5=AE=9A=E3=81=AE?= =?UTF-8?q?=E7=A7=BB=E5=8B=95=E3=80=81=E3=82=B3=E3=83=BC=E3=83=89=E3=81=AE?= =?UTF-8?q?=E9=83=A8=E5=88=86=E5=85=B1=E9=80=9A=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.js | 41 +++++---- Apps.js | 87 ++++--------------- .../EachTrainInfo/TrainDataView.js | 24 +---- .../EachTrainInfoCore.js | 34 ++++---- .../ActionSheetComponents/JRSTraInfo.js | 23 ++++- .../StationDeteilView.js | 27 +++++- components/AndroidWidget/TraInfoEXWidget.jsx | 7 +- stateBox/useDeviceOrientationChange.js | 28 ++++++ 8 files changed, 139 insertions(+), 132 deletions(-) create mode 100644 stateBox/useDeviceOrientationChange.js diff --git a/App.js b/App.js index a7d0236..4041b6e 100644 --- a/App.js +++ b/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,25 +33,27 @@ if (Platform.OS === "android") { export default function App() { useEffect(() => UpdateAsync(), []); return ( - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + ); } export function AppContainer() { diff --git a/Apps.js b/Apps.js index 0e9679b..74be89e 100644 --- a/Apps.js +++ b/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") - .then((d) => { - if (d) { - setIconSetting(d); - } else { - AS.setItem("iconSwitch", "true").then(Updates.reloadAsync); - } - }) - .catch(() => AS.setItem("iconSwitch", "true").then(Updates.reloadAsync)); - }, []); - - useEffect(() => { + ASCore({ k: "iconSwitch", s: setIconSetting, d: "true" }); //地図スイッチ - AS.getItem("mapSwitch") - .then((d) => { - if (d) { - setMapSwitch(d); - } else { - AS.setItem("mapSwitch", "false").then(Updates.reloadAsync); - } - }) - .catch(() => AS.setItem("mapSwitch", "false").then(Updates.reloadAsync)); - }, []); - - useEffect(() => { + ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false" }); //駅メニュースイッチ - AS.getItem("stationSwitch") - .then((d) => { - if (d) { - setStationMenu(d); - } else { - AS.setItem("stationSwitch", "true").then(Updates.reloadAsync); - } - }) - .catch(() => - AS.setItem("stationSwitch", "true").then(Updates.reloadAsync) - ); - }, []); - useEffect(() => { + ASCore({ k: "stationSwitch", s: setStationMenu, d: "true" }); //列車メニュースイッチ - AS.getItem("trainSwitch") - .then((d) => { - if (d) { - setTrainMenu(d); - } else { - AS.setItem("trainSwitch", "true").then(Updates.reloadAsync); - } - }) - .catch(() => AS.setItem("trainSwitch", "true").then(Updates.reloadAsync)); + ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true" }); }, []); const onMessage = (event) => { - if (event.nativeEvent.data.includes("train.html")) { - navigate("trainbase", { info: event.nativeEvent.data, from: "Train" }); + const { data } = event.nativeEvent; + 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) => { - let NearStation = selectLine.filter( + const findStationEachLine = (selectLine) => + 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: () => { - SheetManager.hide("StationDetailView"); - }, + onExit: () => SheetManager.hide("StationDetailView"), }; - SheetManager.show("StationDetailView", { - payload, - }); + SheetManager.show("StationDetailView", { payload }); } } return; diff --git a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js index e8a229e..fdb5426 100644 --- a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js +++ b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js @@ -1,15 +1,7 @@ -import React, { useEffect, useState } from "react"; -import { - View, - Text, - TouchableOpacity, - useWindowDimensions, -} from "react-native"; +import React from "react"; +import { View, TouchableOpacity, useWindowDimensions } from "react-native"; import { StateBox } from "./StateBox"; -import { - heightPercentageToDP, - widthPercentageToDP, -} from "react-native-responsive-screen"; +import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange"; export const TrainDataView = ({ currentTrainData, @@ -18,16 +10,8 @@ export const TrainDataView = ({ openTrainInfo, mode = 0, }) => { - const [isLandscape, setIsLandscape] = useState(false); const { width, height } = useWindowDimensions(); - useEffect(() => { - if (height / width > 1.5) { - setIsLandscape(false); - } - if (height / width < 1.5) { - setIsLandscape(true); - } - }, [width, height]); + const { isLandscape } = useDeviceOrientationChange(); return ( { + 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; diff --git a/components/ActionSheetComponents/JRSTraInfo.js b/components/ActionSheetComponents/JRSTraInfo.js index 03bb430..64b0bc7 100644 --- a/components/ActionSheetComponents/JRSTraInfo.js +++ b/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"} > + { ); }; +const Handler = () => { + useEffect(() => { + const backAction = () => { + SheetManager.hide("JRSTraInfo"); + return true; + }; + const backHandler = BackHandler.addEventListener( + "hardwareBackPress", + backAction + ); + return () => backHandler.remove(); + }, []); + return <>; +}; diff --git a/components/ActionSheetComponents/StationDeteilView.js b/components/ActionSheetComponents/StationDeteilView.js index 3a8874e..497f2ca 100644 --- a/components/ActionSheetComponents/StationDeteilView.js +++ b/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"} > + { ); }; +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%"), diff --git a/components/AndroidWidget/TraInfoEXWidget.jsx b/components/AndroidWidget/TraInfoEXWidget.jsx index d3c7809..46cd4e8 100644 --- a/components/AndroidWidget/TraInfoEXWidget.jsx +++ b/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]} > - - - + + + ); }) diff --git a/stateBox/useDeviceOrientationChange.js b/stateBox/useDeviceOrientationChange.js new file mode 100644 index 0000000..e79e5c0 --- /dev/null +++ b/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 ( + + {children} + + ); +};