diff --git a/MenuPage.js b/MenuPage.js index dc198b5..8c11bda 100644 --- a/MenuPage.js +++ b/MenuPage.js @@ -1,5 +1,10 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useRef } from "react"; import { createStackNavigator } from "@react-navigation/stack"; +import { useWindowDimensions, Platform } from "react-native"; +import Constants from "expo-constants"; + +import { Dimensions, StatusBar } from "react-native"; + import { SheetManager } from "react-native-actions-sheet"; import { AS } from "./storageControl"; import TrainBase from "./components/trainbaseview"; @@ -13,10 +18,13 @@ import AllTrainDiagramView from "./components/AllTrainDiagramView"; import { useCurrentTrain } from "./stateBox/useCurrentTrain"; import { useNavigation } from "@react-navigation/native"; import { news } from "./config/newsUpdate"; +import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs"; const Stack = createStackNavigator(); export function MenuPage() { const { favoriteStation, setFavoriteStation } = useFavoriteStation(); + const { height, width } = useWindowDimensions(); + const tabBarHeight = useBottomTabBarHeight(); const { getCurrentTrain } = useCurrentTrain(); const navigation = useNavigation(); const { addListener } = navigation; @@ -42,8 +50,20 @@ export function MenuPage() { }) .catch((error) => console.error("Error fetching icon setting:", error)); }, []); + + const scrollRef = useRef(null); + const MapHeight = + height - + tabBarHeight + + (Platform.OS == "android" ? Constants.statusBarHeight : 0) - + 100 - + ((((width / 100) * 80) / 20) * 9 + 10 + 30); useEffect(() => { const unsubscribe = addListener("tabPress", (e) => { + scrollRef.current.scrollTo({ + y: MapHeight - 80, + animated: true, + }); AS.getItem("favoriteStation") .then((d) => { const returnData = JSON.parse(d); @@ -65,7 +85,9 @@ export function MenuPage() { gestureEnabled: true, headerTransparent: true, }} - children={() => } + children={() => ( + + )} /> { setTimeout(() => { if (scrollRef.current) { scrollRef.current.scrollTo({ - y: mapsSizeOffset, + y: MapHeight - 80, animated: false, }); } @@ -82,9 +81,9 @@ export default function Menu({ getCurrentTrain }) { const [position, setPosition] = useState(undefined); const getCurrentPosition = () => { if (!locationStatus) return () => {}; - Location.getCurrentPositionAsync({}).then((location) => { - setPosition(location); - }); + Location.getCurrentPositionAsync({}).then((location) => + setPosition(location) + ); }; useEffect(() => { if (!position) return () => {}; @@ -219,380 +218,201 @@ export default function Menu({ getCurrentTrain }) { { - console.log(Object.keys(scrollRef.current)); const scrollY = d.nativeEvent.contentOffset.y + 100; - setMapsOpacity(scrollY < mapsSizeOffset); + setMapsOpacity(scrollY < MapHeight); }} - snapToOffsets={[mapsSizeOffset]} + snapToOffsets={[MapHeight - 80]} > - - alert("地図をタップ")} + /> + + { - alert("地図をタップ"); - }} - > - - - - { + if (!position) return; + const { latitude, longitude } = position.coords; + mapsRef.current.animateToRegion( + { + latitude, + longitude, + latitudeDelta: 0.05, + longitudeDelta: 0.05, + }, + 1000 + ); }} > - + { - if(!position) return; - const { latitude, longitude } = position.coords; - mapsRef.current.animateToRegion( - { - latitude, - longitude, - latitudeDelta: 0.05, - longitudeDelta: 0.05, - }, - 1000 - ); + textAlign: "center", }} > - - - 現在地基準 - - - { - // お気に入りリスト更新 - }} - > - - - お気に入りリスト - - - - + + - - <> - {originalStationList.length != 0 && allStationData.length != 0 && ( - - { - return ( - - - - - - ); - }} + onPress={() => { + // お気に入りリスト更新 + }} + > + - - {originalStationList && - allStationData.map((d, index) => { - const active = index == selectedCurrentStation; - const numberIndex = d[0].StationNumber; - if (dotButton) { - return ( - setSelectedCurrentStation(index)} - currentStation={d} - active={active} - index={numberIndex} + お気に入りリスト + + + + {allStationData.length != 0 && originalStationList.length != 0 && ( + <> + + { + return ( + + + - ); - } else { - return ( - setSelectedCurrentStation(index)} - active={active} - index={numberIndex} - /> - ); - } - })} + + + ); + }} + /> + + {originalStationList && + allStationData.map((d, index) => { + const active = index == selectedCurrentStation; + const numberIndex = d[0].StationNumber; + if (dotButton) { + return ( + setSelectedCurrentStation(index)} + currentStation={d} + active={active} + index={numberIndex} + /> + ); + } else { + return ( + setSelectedCurrentStation(index)} + active={active} + index={numberIndex} + /> + ); + } + })} + - + {allStationData[selectedCurrentStation] && ( + {}} + /> + )} + )} - {allStationData.length != 0 && - originalStationList.length != 0 && - allStationData[selectedCurrentStation] && ( - {}} - /> - )} + + ); } - -const TopMenuButton = ({ show }) => { - const buttonList = [ - { - backgroundColor: "#F89038", - icon: "train-car", - onPress: () => - Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"), - title: "駅・鉄道情報", - }, - { - backgroundColor: "#EA4752", - icon: "google-spreadsheet", - onPress: () => - Linking.openURL( - "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box" - ), - title: "運賃表", - }, - { - backgroundColor: "#91C31F", - icon: "clipboard-list-outline", - onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"), - title: "予約", - }, - ]; - return ( - - {buttonList.map((d, index) => ( - - {d.title} - - ))} - - ); -}; - -const JRSTraInfoBox = () => { - const { getTime, delayData, loadingDelayData, setLoadingDelayData } = - useTrainDelayData(); - const styles = { - touch: { - backgroundColor: "#0099CC", - borderRadius: 5, - margin: 10, - borderColor: "black", - borderWidth: 2, - overflow: "hidden", - }, - scroll: { - backgroundColor: "#0099CC", - borderRadius: 5, - maxHeight: 300, - }, - bottom: { - position: "absolute", - top: 250, - alignItems: "center", - width: "100%", - height: 50, - backgroundColor: "#007FCC88", - }, - box: { - padding: 10, - backgroundColor: "white", - borderBottomLeftRadius: 5, - borderBottomRightRadius: 5, - }, - }; - return ( - SheetManager.show("JRSTraInfo")} - style={styles.touch} - > - - - - 列車遅延速報EX - - - - {getTime - ? getTime.toLocaleTimeString("ja-JP").split(":")[0] + - ":" + - getTime.toLocaleTimeString("ja-JP").split(":")[1] - : NaN} - - { - setLoadingDelayData(true); - }} - /> - - - {loadingDelayData ? ( - - - - ) : delayData ? ( - delayData.map((d, index, array) => { - let data = d.split(" "); - return ( - - - {data[0].replace("\n", "")} - - {data[1]} - {data[3]} - - ); - }) - ) : ( - 現在、5分以上の遅れはありません。 - )} - - - - - - 詳細を見る - - - - - ); -};