From 97a6bbc619c8ebdf486b90a50b408dc7bcd80f17 Mon Sep 17 00:00:00 2001 From: harukin-expo-dev-env Date: Sun, 13 Apr 2025 12:41:33 +0000 Subject: [PATCH] =?UTF-8?q?Carousel=E3=81=A8=E5=88=87=E3=82=8A=E6=9B=BF?= =?UTF-8?q?=E3=81=88=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Menu/Carousel/CarouselBox.tsx | 125 ++++++++++ .../Menu/Carousel/CarouselTypeChanger.tsx | 80 +++++++ menu.js | 216 ++---------------- stateBox/useStationList.tsx | 3 +- 4 files changed, 221 insertions(+), 203 deletions(-) create mode 100644 components/Menu/Carousel/CarouselBox.tsx create mode 100644 components/Menu/Carousel/CarouselTypeChanger.tsx diff --git a/components/Menu/Carousel/CarouselBox.tsx b/components/Menu/Carousel/CarouselBox.tsx new file mode 100644 index 0000000..6f595a6 --- /dev/null +++ b/components/Menu/Carousel/CarouselBox.tsx @@ -0,0 +1,125 @@ +import Sign from "@/components/駅名表/Sign"; +import React, { useEffect, useState } from "react"; +import { AS } from "@/storageControl"; +import { useWindowDimensions, View, LayoutAnimation } from "react-native"; +import Carousel from "react-native-reanimated-carousel"; +import { SheetManager } from "react-native-actions-sheet"; +import { StationNumber } from "../StationPagination"; +import { SimpleDot } from "../SimpleDot"; +export const CarouselBox = ({ + originalStationList, + allStationData, + currentStation, + setSelectedCurrentStation, + carouselRef, + selectedCurrentStation, + navigate, +}) => { + const { height, width } = useWindowDimensions(); + const [dotButton, setDotButton] = useState(false); + const oPSign = () => { + const payload = { + currentStation: allStationData[selectedCurrentStation], + navigate, + goTo: "menu", + //@ts-ignore + useShow: () => SheetManager.show("StationDetailView", { payload }), + onExit: () => SheetManager.hide("StationDetailView"), + }; + //@ts-ignore + SheetManager.show("StationDetailView", { payload }); + }; + const oLPSign = () => { + LayoutAnimation.configureNext({ + duration: 600, + update: { type: "spring", springDamping: 0.5 }, + }); + AS.setItem( + "CarouselSettings/activeDotSettings", + !dotButton ? "true" : "false" + ); + setDotButton(!dotButton); + }; + + useEffect(() => { + AS.getItem("CarouselSettings/activeDotSettings").then((data) => { + setDotButton(data === "true"); + }); + }, []); + return ( + + { + return ( + + + + + + ); + }} + /> + + {originalStationList && + allStationData.map((d, index) => { + const active = index == selectedCurrentStation; + const numberIndex = d[0].StationNumber; + if (dotButton) { + return ( + setSelectedCurrentStation(index)} + currentStation={d} + active={active} + key={numberIndex} + /> + ); + } else { + return ( + setSelectedCurrentStation(index)} + active={active} + key={numberIndex} + /> + ); + } + })} + + + ); +}; diff --git a/components/Menu/Carousel/CarouselTypeChanger.tsx b/components/Menu/Carousel/CarouselTypeChanger.tsx new file mode 100644 index 0000000..776f4d9 --- /dev/null +++ b/components/Menu/Carousel/CarouselTypeChanger.tsx @@ -0,0 +1,80 @@ +import React, { useRef } from "react"; +import { View, TouchableOpacity, Text } from "react-native"; +import Ionicons from "react-native-vector-icons/Ionicons"; + +export const CarouselTypeChanger = ({ locationStatus, position, mapsRef }) => { + return ( + + { + if (!position) return; + const { latitude, longitude } = position.coords; + mapsRef.current.animateToRegion( + { + latitude, + longitude, + latitudeDelta: 0.05, + longitudeDelta: 0.05, + }, + 1000 + ); + }} + > + + + 現在地基準 + + + { + // お気に入りリスト更新 + }} + > + + + お気に入りリスト + + + + ); +}; diff --git a/menu.js b/menu.js index 5cb79d4..48f86a9 100644 --- a/menu.js +++ b/menu.js @@ -1,14 +1,5 @@ import React, { useRef, useState, useEffect } from "react"; -import Carousel from "react-native-reanimated-carousel"; -import { - Platform, - View, - ScrollView, - Text, - TouchableOpacity, - LayoutAnimation, - useWindowDimensions, -} from "react-native"; +import { Platform, View, ScrollView, useWindowDimensions } from "react-native"; import Constants from "expo-constants"; import * as Location from "expo-location"; import { @@ -16,27 +7,23 @@ import { ReanimatedLogLevel, } from "react-native-reanimated"; import StatusbarDetect from "./StatusbarDetect"; -import { Ionicons } from "@expo/vector-icons"; import LED_vision from "./components/発車時刻表/LED_vidion"; -import Sign from "./components/駅名表/Sign"; import { TitleBar } from "./components/Menu/TitleBar"; import { FixedContentBottom } from "./components/Menu/FixedContentBottom"; import { lineList } from "./lib/getStationList"; import useInterval from "./lib/useInterval"; import { useFavoriteStation } from "./stateBox/useFavoriteStation"; -import { SheetManager } from "react-native-actions-sheet"; import { useNavigation } from "@react-navigation/native"; import { useStationList } from "./stateBox/useStationList"; -import { StationNumber } from "./components/Menu/StationPagination"; -import { AS } from "./storageControl"; -import { SimpleDot } from "./components/Menu/SimpleDot"; import { TopMenuButton } from "@/components/Menu/TopMenuButton"; import { JRSTraInfoBox } from "@/components/Menu/JRSTraInfoBox"; import MapView 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"; +import { CarouselTypeChanger } from "./components/Menu/Carousel/CarouselTypeChanger"; configureReanimatedLogger({ level: ReanimatedLogLevel.error, // Set the log level to error strict: true, // Reanimated runs in strict mode by default @@ -157,23 +144,6 @@ export default function Menu({ getCurrentTrain, scrollRef }) { }); }, [selectedCurrentStation]); - //全列車ダイヤリストを作成するuseEffect - const oPSign = () => { - const payload = { - currentStation: - originalStationList && - allStationData.length != 0 && - allStationData[selectedCurrentStation], - navigate: navigate, - goTo: "menu", - useShow: () => SheetManager.show("StationDetailView", { payload }), - onExit: () => SheetManager.hide("StationDetailView"), - }; - SheetManager.show("StationDetailView", { payload }); - }; - - const [dotButton, setDotButton] = useState(false); - useEffect(() => { console.log(selectedCurrentStation); if (allStationData.length == 0) return; @@ -190,23 +160,6 @@ export default function Menu({ getCurrentTrain, scrollRef }) { }; mapsRef.current.animateToRegion(mapRegion, 1000); }, [selectedCurrentStation, currentStation, allStationData, mapsRef]); - - useEffect(() => { - AS.getItem("CarouselSettings/activeDotSettings").then((data) => { - setDotButton(data === "true"); - }); - }, []); - const oLPSign = () => { - LayoutAnimation.configureNext({ - duration: 600, - update: { type: "spring", springDamping: 0.5 }, - }); - AS.setItem( - "CarouselSettings/activeDotSettings", - !dotButton ? "true" : "false" - ); - setDotButton(!dotButton); - }; return ( alert("地図をタップ")} /> - - { - if (!position) return; - const { latitude, longitude } = position.coords; - mapsRef.current.animateToRegion( - { - latitude, - longitude, - latitudeDelta: 0.05, - longitudeDelta: 0.05, - }, - 1000 - ); - }} - > - - - 現在地基準 - - - { - // お気に入りリスト更新 - }} - > - - - お気に入りリスト - - - + {allStationData.length != 0 && originalStationList.length != 0 && ( <> - - { - return ( - - - - - - ); - }} - /> - - {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] && ( = ({ children }) => { useEffect(()=>{ if(originalStationList.length === 0) return; const stationList = - originalStationList && lineList.map((d) => originalStationList[d].map((a) => ({ StationNumber: a.StationNumber, StationName: a.Station_JP, })) ); - setStationList(stationList) + setStationList(stationList); },[originalStationList]) return (