From 17602751d61aa824b9ecb13568fe6e676e049b94 Mon Sep 17 00:00:00 2001 From: harukin-OneMix4 Date: Sun, 11 Feb 2024 21:27:28 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Apps=E3=82=92=E6=A8=AA=E5=90=91=E3=81=8D?= =?UTF-8?q?=E5=AF=BE=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Apps.js | 62 +++++++++++++++++++--- app.json | 2 +- components/trainMenu.js | 115 +++++++++++++++++++++------------------- 3 files changed, 116 insertions(+), 63 deletions(-) diff --git a/Apps.js b/Apps.js index 84c25ff..0325832 100644 --- a/Apps.js +++ b/Apps.js @@ -1,8 +1,25 @@ -import React, { useEffect, useRef, useState } from "react"; -import { View, Platform, Text, TouchableOpacity } from "react-native"; +import React, { + useEffect, + useLayoutEffect, + useRef, + useState, + useCallback, +} from "react"; +import { + View, + Platform, + Text, + TouchableOpacity, + useWindowDimensions, +} from "react-native"; import { WebView } from "react-native-webview"; import Constants from "expo-constants"; import { Ionicons } from "@expo/vector-icons"; + +import { + widthPercentageToDP as wp, + heightPercentageToDP as hp, +} from "react-native-responsive-screen"; import { AS } from "./storageControl"; import { news } from "./config/newsUpdate"; import { getStationList, lineList } from "./lib/getStationList"; @@ -11,15 +28,30 @@ import { checkDuplicateTrainData } from "./lib/checkDuplicateTrainData"; import { useFavoriteStation } from "./stateBox/useFavoriteStation"; import { useCurrentTrain } from "./stateBox/useCurrentTrain"; import { SheetManager } from "react-native-actions-sheet"; +import TrainMenu from "./components/trainMenu"; /* import StatusbarDetect from './StatusbarDetect'; var Status = StatusbarDetect(); */ export default function Apps({ navigation, webview, stationData }) { const { currentTrain } = useCurrentTrain(); + const { height, width } = useWindowDimensions(); const { navigate } = navigation; var urlcache = ""; const { favoriteStation } = useFavoriteStation(); + const [isLandscape, setIsLandscape] = useState(false); //画面が横向きかどうか + const handleLayout = () => {}; + useEffect(() => { + console.log("レイアウト変更"); + console.log(height, width); + console.log(height / width); + if (height / width > 1.5) { + setIsLandscape(false); + } + if (height / width < 1.5) { + setIsLandscape(true); + } + }, [height, width]); //画面表示関連 const [iconSetting, setIconSetting] = useState(undefined); @@ -271,8 +303,22 @@ export default function Apps({ navigation, webview, stationData }) { style={{ height: "100%", paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0, + flexDirection: isLandscape ? "row" : "column", }} + onLayout={handleLayout} > + {isLandscape ? ( + + ) : null} {/* {Status} */} - navigate("trainMenu", { webview })} - top={Platform.OS == "ios" ? Constants.statusBarHeight : 0} - mapSwitch={mapSwitch == "true" ? "flex" : "none"} - /> + {isLandscape || ( + navigate("trainMenu", { webview })} + top={Platform.OS == "ios" ? Constants.statusBarHeight : 0} + mapSwitch={mapSwitch == "true" ? "flex" : "none"} + /> + )} webview.current.reload()} top={Platform.OS == "ios" ? Constants.statusBarHeight : 0} diff --git a/app.json b/app.json index 1686ab8..19aa076 100644 --- a/app.json +++ b/app.json @@ -8,7 +8,7 @@ "android" ], "version": "4.6", - "orientation": "portrait", + "orientation": "default", "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", diff --git a/components/trainMenu.js b/components/trainMenu.js index 3069e1d..3702c6f 100644 --- a/components/trainMenu.js +++ b/components/trainMenu.js @@ -6,10 +6,11 @@ export default function TrainMenu({ navigation: { navigate }, webview, stationData, + style, }) { const mapRef = useRef(); return ( - + ); }) )} - - - navigate("howto", { - info: "https://train.jr-shikoku.co.jp/usage.htm", - }) - } + {navigate && ( + + + navigate("howto", { + info: "https://train.jr-shikoku.co.jp/usage.htm", + }) + } + > + 使い方 + + navigate("favoriteList")} + > + お気に入り + + + Linking.openURL( + "https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2" + ) + } + > + フィードバック + + + )} + {navigate && ( + navigate("Apps")} > - 使い方 - - navigate("favoriteList")} - > - お気に入り - - - Linking.openURL( - "https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2" - ) - } - > - この機能のフィードバック - - - navigate("Apps")} - > - - - 閉じる - - - + + + 閉じる + + + + )} ); } @@ -115,14 +120,14 @@ const UsefulBox = (props) => { style={{ flex: flex, backgroundColor: backgroundColor, - padding: 10, + padding: 5, alignItems: "center", margin: 2, }} onPress={onPressButton} > - + {children} From 38052abd30f33766905834cc9fe3b34439a8148f Mon Sep 17 00:00:00 2001 From: harukin-OneMix4 Date: Sun, 11 Feb 2024 21:32:06 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E6=A8=AA=E5=B9=85=E3=82=92=E3=81=A8?= =?UTF-8?q?=E3=82=8C=E3=81=A6=E3=81=84=E3=81=AA=E3=81=84=E3=83=90=E3=82=B0?= =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Apps.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Apps.js b/Apps.js index 0325832..b30d5f6 100644 --- a/Apps.js +++ b/Apps.js @@ -313,7 +313,7 @@ export default function Apps({ navigation, webview, stationData }) { stationData={stationData} navigation={{ navigate: null }} style={{ - width: wp("40%"), + width: (width / 100) * 40, height: "100%", flexDirection: "column-reverse", }} From 93529f4f7deb24152ad1f7ccc5802f0d5373ce72 Mon Sep 17 00:00:00 2001 From: harukin-OneMix4 Date: Sun, 11 Feb 2024 23:54:55 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=E5=B9=85=E6=8C=87=E5=AE=9A=E3=82=92useWind?= =?UTF-8?q?owDimensions=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Apps.js | 12 +----------- .../EachTrainInfo/TrainDataView.js | 10 ++++++++-- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/Apps.js b/Apps.js index b30d5f6..1df2b4a 100644 --- a/Apps.js +++ b/Apps.js @@ -1,10 +1,4 @@ -import React, { - useEffect, - useLayoutEffect, - useRef, - useState, - useCallback, -} from "react"; +import React, { useEffect, useState } from "react"; import { View, Platform, @@ -16,10 +10,6 @@ import { WebView } from "react-native-webview"; import Constants from "expo-constants"; import { Ionicons } from "@expo/vector-icons"; -import { - widthPercentageToDP as wp, - heightPercentageToDP as hp, -} from "react-native-responsive-screen"; import { AS } from "./storageControl"; import { news } from "./config/newsUpdate"; import { getStationList, lineList } from "./lib/getStationList"; diff --git a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js index cf73398..449786c 100644 --- a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js +++ b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js @@ -1,5 +1,10 @@ import React from "react"; -import { View, Text, TouchableOpacity } from "react-native"; +import { + View, + Text, + TouchableOpacity, + useWindowDimensions, +} from "react-native"; import { StateBox } from "./StateBox"; import { heightPercentageToDP, @@ -13,13 +18,14 @@ export const TrainDataView = ({ openTrainInfo, mode = 0, }) => { + const { width, height } = useWindowDimensions(); return ( From 72412e87e887a1cbcf3987927c16fc9cb9e36949 Mon Sep 17 00:00:00 2001 From: harukin-OneMix4 Date: Mon, 12 Feb 2024 00:51:47 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E3=81=A8=E3=82=8A=E3=81=82=E3=81=88?= =?UTF-8?q?=E3=81=9A=E3=81=93=E3=82=8C=E3=81=A7=E3=83=93=E3=83=AB=E3=83=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Apps.js | 3 - .../ActionSheetComponents/EachTrainInfo.js | 324 ++++++++++++------ .../EachTrainInfo/LandscapeTrainInfo.js | 47 +++ .../EachTrainInfo/TrainDataView.js | 14 +- 4 files changed, 282 insertions(+), 106 deletions(-) create mode 100644 components/ActionSheetComponents/EachTrainInfo/LandscapeTrainInfo.js diff --git a/Apps.js b/Apps.js index 1df2b4a..2e3e09d 100644 --- a/Apps.js +++ b/Apps.js @@ -32,9 +32,6 @@ export default function Apps({ navigation, webview, stationData }) { const [isLandscape, setIsLandscape] = useState(false); //画面が横向きかどうか const handleLayout = () => {}; useEffect(() => { - console.log("レイアウト変更"); - console.log(height, width); - console.log(height / width); if (height / width > 1.5) { setIsLandscape(false); } diff --git a/components/ActionSheetComponents/EachTrainInfo.js b/components/ActionSheetComponents/EachTrainInfo.js index c508f9c..d3f5368 100644 --- a/components/ActionSheetComponents/EachTrainInfo.js +++ b/components/ActionSheetComponents/EachTrainInfo.js @@ -6,9 +6,13 @@ import { TouchableOpacity, Platform, StyleSheet, + useWindowDimensions, } from "react-native"; import { Ionicons } from "@expo/vector-icons"; -import ActionSheet, { SheetManager } from "react-native-actions-sheet"; +import ActionSheet, { + SheetManager, + useScrollHandlers, +} from "react-native-actions-sheet"; import { AS } from "../../storageControl"; import trainList from "../../assets/originData/trainList"; import { lineList } from "../../lib/getStationList"; @@ -24,6 +28,7 @@ import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView"; import { LongHeader } from "./EachTrainInfo/LongHeader"; import { ShortHeader } from "./EachTrainInfo/ShortHeader"; import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent"; +import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo"; export const EachTrainInfo = (props) => { if (!props.payload) return <>; @@ -47,6 +52,16 @@ export const EachTrainInfo = (props) => { const [isConcatNear, setIsConcatNear] = useState(false); const [tailStation, setTailStation] = useState(); const [headStation, setHeadStation] = useState(); + const { height, width } = useWindowDimensions(); + const [isLandscape, setIsLandscape] = useState(false); + useEffect(() => { + if (height / width > 1.5) { + setIsLandscape(false); + } + if (height / width < 1.5) { + setIsLandscape(true); + } + }, [width, height]); // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false); //裏列車探索 @@ -376,6 +391,7 @@ export const EachTrainInfo = (props) => { .replace("ライナーライナー", "ライナー"); }; const actionSheetRef = useRef(null); + const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef); return ( { ref={actionSheetRef} drawUnderStatusBar={false} isModal={Platform.OS == "ios"} + //useBottomSafeAreaPadding={Platform.OS == "android"} > { /> )} - - ) : ( - - ) - } - longHeader={ - from == "AllTrainDiagramView" ? ( - <> - ) : ( - - ) - } - topStickyContent={ - - } - > - {headStation && !isConcatNear && ( - openBackTrainInfo(headStation)} - style={{ - padding: 10, - flexDirection: "row", - borderColor: "blue", - borderWidth: 1, - margin: 10, - borderRadius: 5, - alignItems: "center", - }} - > - + ) : ( + + ) + } + topStickyContent={ + + } + > + {headStation && !isConcatNear && ( + openBackTrainInfo(headStation)} + style={{ + padding: 10, + flexDirection: "row", + borderColor: "blue", + borderWidth: 1, + margin: 10, + borderRadius: 5, + alignItems: "center", + }} > - 「本当の始発駅」を表示 - - - )} - {/* + 「本当の始発駅」を表示 + + + )} + {/* { /> ほげほげふがふが */} - {trainData.map((i, index) => - i.split(",")[1] == "提" ? ( - - ) : ( - - ) - )} - {tailStation && !isConcatNear && ( - openBackTrainInfo(tailStation)} - style={{ - padding: 10, - flexDirection: "row", - borderColor: "blue", - borderWidth: 1, - margin: 10, - borderRadius: 5, - alignItems: "center", - }} - > - + i.split(",")[1] == "提" ? ( + + ) : ( + + ) + )} + {tailStation && !isConcatNear && ( + openBackTrainInfo(tailStation)} + style={{ + padding: 10, + flexDirection: "row", + borderColor: "blue", + borderWidth: 1, + margin: 10, + borderRadius: 5, + alignItems: "center", + }} > - 「本当の終着駅」を表示 - - - )} + + 「本当の終着駅」を表示 + + + )} - - - - + + + + + - - + + ) : ( + + ) : ( + + ) + } + longHeader={ + from == "AllTrainDiagramView" ? ( + <> + ) : ( + + ) + } + topStickyContent={ + + } + > + {headStation && !isConcatNear && ( + openBackTrainInfo(headStation)} + style={{ + padding: 10, + flexDirection: "row", + borderColor: "blue", + borderWidth: 1, + margin: 10, + borderRadius: 5, + alignItems: "center", + }} + > + + 「本当の始発駅」を表示 + + + )} + {/* + ほげほげふがふが */} + + {trainData.map((i, index) => + i.split(",")[1] == "提" ? ( + + ) : ( + + ) + )} + {tailStation && !isConcatNear && ( + openBackTrainInfo(tailStation)} + style={{ + padding: 10, + flexDirection: "row", + borderColor: "blue", + borderWidth: 1, + margin: 10, + borderRadius: 5, + alignItems: "center", + }} + > + + 「本当の終着駅」を表示 + + + )} + + + + + + + + + )} ); diff --git a/components/ActionSheetComponents/EachTrainInfo/LandscapeTrainInfo.js b/components/ActionSheetComponents/EachTrainInfo/LandscapeTrainInfo.js new file mode 100644 index 0000000..8538b65 --- /dev/null +++ b/components/ActionSheetComponents/EachTrainInfo/LandscapeTrainInfo.js @@ -0,0 +1,47 @@ +import React from "react"; +import { View, Text, ScrollView, useWindowDimensions } from "react-native"; + +export const LandscapeTrainInfo = (props) => { + const { leftContent, topStickyContent, children, scrollHandlers } = props; + const { height, width } = useWindowDimensions(); + return ( + + + {width / 2} + {leftContent} + + { + console.log(d.nativeEvent.contentOffset.y); + }} + > + + + {topStickyContent} + + {children} + + + ); +}; diff --git a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js index 449786c..6ac2eb7 100644 --- a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js +++ b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { View, Text, @@ -18,14 +18,24 @@ 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]); + return (