diff --git a/Apps.js b/Apps.js index 84c25ff..2e3e09d 100644 --- a/Apps.js +++ b/Apps.js @@ -1,8 +1,15 @@ -import React, { useEffect, useRef, useState } from "react"; -import { View, Platform, Text, TouchableOpacity } from "react-native"; +import React, { useEffect, useState } 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 { AS } from "./storageControl"; import { news } from "./config/newsUpdate"; import { getStationList, lineList } from "./lib/getStationList"; @@ -11,15 +18,27 @@ 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(() => { + if (height / width > 1.5) { + setIsLandscape(false); + } + if (height / width < 1.5) { + setIsLandscape(true); + } + }, [height, width]); //画面表示関連 const [iconSetting, setIconSetting] = useState(undefined); @@ -271,8 +290,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/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 cf73398..6ac2eb7 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 React, { useEffect, useState } from "react"; +import { + View, + Text, + TouchableOpacity, + useWindowDimensions, +} from "react-native"; import { StateBox } from "./StateBox"; import { heightPercentageToDP, @@ -13,13 +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 ( 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}