From 99ba90f32443cbd0b363d9b7e5888fb9c476a111 Mon Sep 17 00:00:00 2001 From: harukin-expo-dev-env Date: Sun, 13 Apr 2025 19:46:15 +0000 Subject: [PATCH] =?UTF-8?q?=E3=83=9E=E3=83=83=E3=83=97=E3=81=AE=E7=A7=BB?= =?UTF-8?q?=E5=8B=95=E6=A9=9F=E8=83=BD=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Menu/Carousel/CarouselTypeChanger.tsx | 37 ++++++++------ menu.js | 51 ++++++++++++++----- 2 files changed, 58 insertions(+), 30 deletions(-) diff --git a/components/Menu/Carousel/CarouselTypeChanger.tsx b/components/Menu/Carousel/CarouselTypeChanger.tsx index 4f5b3ac..a41b8da 100644 --- a/components/Menu/Carousel/CarouselTypeChanger.tsx +++ b/components/Menu/Carousel/CarouselTypeChanger.tsx @@ -1,5 +1,5 @@ import React, { useRef } from "react"; -import { View, TouchableOpacity, Text } from "react-native"; +import { View, TouchableOpacity, Text, LayoutAnimation } from "react-native"; import Ionicons from "react-native-vector-icons/Ionicons"; export const CarouselTypeChanger = ({ @@ -7,8 +7,24 @@ export const CarouselTypeChanger = ({ position, mapsRef, stationListMode, - setStationListMode,setSelectedCurrentStation + setStationListMode, + setSelectedCurrentStation, + setMapMode, }) => { + const returnToDefaultMode = ()=>{ + LayoutAnimation.configureNext({ + duration: 300, + create: { + type: LayoutAnimation.Types.easeInEaseOut, + property: LayoutAnimation.Properties.opacity, + }, + update: { + type: LayoutAnimation.Types.easeInEaseOut, + property: LayoutAnimation.Properties.opacity, + }, + }); + setMapMode(false); + } return ( { if (!position) return; + returnToDefaultMode(); const { latitude, longitude } = position.coords; mapsRef.current.animateToRegion( { @@ -66,20 +83,7 @@ export const CarouselTypeChanger = ({ marginHorizontal: 5, borderRadius: 50, }} - disabled={true} - onPress={() => { - if (!position) return; - const { latitude, longitude } = position.coords; - mapsRef.current.animateToRegion( - { - latitude, - longitude, - latitudeDelta: 0.05, - longitudeDelta: 0.05, - }, - 1000 - ); - }} + onPress={() => returnToDefaultMode()} > { + returnToDefaultMode(); // お気に入りリスト更新 setStationListMode("favorite"); setSelectedCurrentStation(0); diff --git a/menu.js b/menu.js index 393a305..0214584 100644 --- a/menu.js +++ b/menu.js @@ -1,5 +1,5 @@ import React, { useRef, useState, useEffect } from "react"; -import { Platform, View, ScrollView, useWindowDimensions } from "react-native"; +import { Platform, View, ScrollView, useWindowDimensions, LayoutAnimation } from "react-native"; import Constants from "expo-constants"; import { configureReanimatedLogger, @@ -17,7 +17,7 @@ import { useNavigation } from "@react-navigation/native"; import { useStationList } from "./stateBox/useStationList"; import { TopMenuButton } from "@/components/Menu/TopMenuButton"; import { JRSTraInfoBox } from "@/components/Menu/JRSTraInfoBox"; -import MapView from "react-native-maps"; +import MapView, { Marker } from "react-native-maps"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs"; import { CarouselBox } from "./components/Menu/Carousel/CarouselBox"; @@ -27,14 +27,14 @@ configureReanimatedLogger({ level: ReanimatedLogLevel.error, // Set the log level to error strict: true, // Reanimated runs in strict mode by default }); -export default function Menu({scrollRef }) { +export default function Menu({ scrollRef }) { const { navigate, addListener, isFocused } = useNavigation(); const { favoriteStation } = useFavoriteStation(); const { originalStationList } = useStationList(); const { height, width } = useWindowDimensions(); const { bottom, left, right, top } = useSafeAreaInsets(); + const [mapMode, setMapMode] = useState(false); const tabBarHeight = useBottomTabBarHeight(); - const [mapsOpacity, setMapsOpacity] = useState(false); const [stationListMode, setStationListMode] = useState( /*<"position"|"favorite">*/ "position" ); @@ -45,6 +45,7 @@ export default function Menu({scrollRef }) { (Platform.OS == "android" ? Constants.statusBarHeight : 0) - 100 - ((((width / 100) * 80) / 20) * 9 + 10 + 30); + const MapFullHeight = height - tabBarHeight + (Platform.OS == "android" ? Constants.statusBarHeight : 0) - 100; useEffect(() => { setTimeout(() => { if (scrollRef.current) { @@ -95,12 +96,13 @@ export default function Menu({scrollRef }) { }; let returnDataBase = lineList - .map((d) => findStationEachLine(originalStationList[d])) + .map((d) => findStationEachLine(originalStationList[d])) .filter((d) => d.length > 0) .reduce((pre, current) => { pre.push(...current); return pre; - }, []).map((d) => [d]); + }, []) + .map((d) => [d]); setNearPositionStation(returnDataBase.length ? returnDataBase : []); }; @@ -154,15 +156,11 @@ export default function Menu({scrollRef }) { snapToStart={false} snapToEnd={false} decelerationRate={"normal"} - onScroll={(d) => { - const scrollY = d.nativeEvent.contentOffset.y + 100; - setMapsOpacity(scrollY < MapHeight); - }} snapToOffsets={[MapHeight - 80]} > alert("地図をタップ")} - /> + onTouchStart={() => { + LayoutAnimation.configureNext({ + duration: 300, + create: { + type: LayoutAnimation.Types.easeInEaseOut, + property: LayoutAnimation.Properties.opacity, + }, + update: { + type: LayoutAnimation.Types.easeInEaseOut, + property: LayoutAnimation.Properties.opacity, + }, + }); + setMapMode(true); + }} + > + {listUpStation.map(([{ lat, lng, StationNumber }], index) => ( + + ))} + {listUpStation.length != 0 && originalStationList.length != 0 && ( @@ -194,7 +217,7 @@ export default function Menu({scrollRef }) { originalStationList, listUpStation, nearPositionStation, - setListIndex , + setListIndex, listIndex, navigate, }}