From 9478f2df8d3464ba79db96c08cf854f328dfd7a7 Mon Sep 17 00:00:00 2001 From: harukin-expo-dev-env Date: Mon, 7 Jul 2025 11:48:46 +0000 Subject: [PATCH] =?UTF-8?q?=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=AE?= =?UTF-8?q?=E8=B7=AF=E7=B7=9A=E5=88=A5=E3=83=AA=E3=82=B9=E3=83=88=E3=82=A2?= =?UTF-8?q?=E3=83=83=E3=83=97=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 --- components/Menu/Carousel/CarouselBox.tsx | 35 +++++- .../Menu/Carousel/CarouselTypeChanger.tsx | 3 +- components/Menu/RailScope/SearchUnitBox.tsx | 106 ++++++++++++------ menu.js | 29 ++++- 4 files changed, 128 insertions(+), 45 deletions(-) diff --git a/components/Menu/Carousel/CarouselBox.tsx b/components/Menu/Carousel/CarouselBox.tsx index f126278..51fbe47 100644 --- a/components/Menu/Carousel/CarouselBox.tsx +++ b/components/Menu/Carousel/CarouselBox.tsx @@ -7,6 +7,7 @@ import { LayoutAnimation, TouchableOpacity, Text, + ScrollView, } from "react-native"; import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel"; import { SheetManager } from "react-native-actions-sheet"; @@ -19,11 +20,22 @@ export const CarouselBox = ({ setListIndex, listIndex, navigate, - stationListMode + stationListMode, }) => { const carouselRef = useRef(null); const { height, width } = useWindowDimensions(); const [dotButton, setDotButton] = useState(false); + const carouselBadgeScrollViewRef = useRef(null); + + useEffect(() => { + if (!carouselBadgeScrollViewRef.current) return; + const scrollToIndex = listIndex * (width / listUpStation.length) + 10; + console.log("scrollToIndex", scrollToIndex); + carouselBadgeScrollViewRef.current.scrollTo({ + x: scrollToIndex, + animated: true, + }); + }, [listIndex, dotButton, width, carouselBadgeScrollViewRef]); const oPSign = () => { const payload = { currentStation: listUpStation[listIndex], @@ -98,7 +110,9 @@ export const CarouselBox = ({ }} > - {stationListMode == "position" ? "現在地の近くに駅がありません。" : "お気に入りリストがありません。お気に入りの駅を追加しよう！"} + {stationListMode == "position" + ? "現在地の近くに駅がありません。" + : "お気に入りリストがありません。お気に入りの駅を追加しよう！"} @@ -131,12 +145,23 @@ export const CarouselBox = ({ onSnapToItem={setListIndex} renderItem={RenderItem} /> - { + // ScrollViewのrefを保存 + if (scrollViewRef) { + carouselBadgeScrollViewRef.current = scrollViewRef; + } }} > {originalStationList && @@ -158,7 +183,7 @@ export const CarouselBox = ({ /> ); })} - + ); }; diff --git a/components/Menu/Carousel/CarouselTypeChanger.tsx b/components/Menu/Carousel/CarouselTypeChanger.tsx index 84767a7..57266ae 100644 --- a/components/Menu/Carousel/CarouselTypeChanger.tsx +++ b/components/Menu/Carousel/CarouselTypeChanger.tsx @@ -23,9 +23,10 @@ export const CarouselTypeChanger = ({ setSelectedCurrentStation, mapMode, setMapMode, + isSearchMode, + setisSearchMode, }) => { const tabBarHeight = useBottomTabBarHeight(); - const [isSearchMode, setisSearchMode] = React.useState(false); const { height, width } = useWindowDimensions(); const returnToDefaultMode = () => { LayoutAnimation.configureNext({ diff --git a/components/Menu/RailScope/SearchUnitBox.tsx b/components/Menu/RailScope/SearchUnitBox.tsx index 81512c0..9d0c1f2 100644 --- a/components/Menu/RailScope/SearchUnitBox.tsx +++ b/components/Menu/RailScope/SearchUnitBox.tsx @@ -10,53 +10,90 @@ import { } from "react-native"; import Ionicons from "react-native-vector-icons/Ionicons"; import { useWindowDimensions } from "react-native"; +import lineColorList from "@/assets/originData/lineColorList"; +import { lineList_LineWebID, stationIDPair } from "@/lib/getStationList"; export const SearchUnitBox = ({ isSearchMode, setisSearchMode }) => { const { height, width } = useWindowDimensions(); return ( <> - { - LayoutAnimation.configureNext({ - duration: 200, - update: { type: "easeInEaseOut", springDamping: 0.6 }, - }); - setisSearchMode(true); - }} - > - {!isSearchMode && } - {isSearchMode && ( + { + LayoutAnimation.configureNext({ + duration: 100, + update: { type: "easeInEaseOut", springDamping: 0.6 }, + }); + setisSearchMode(true); + }} + > + {!isSearchMode && } + {!!isSearchMode && ( - { + + + { LayoutAnimation.configureNext({ - duration: 200, + duration: 100, update: { type: "easeInEaseOut", springDamping: 0.6 }, }); setisSearchMode(false); - }} - > - あああああああああああああああああああああああああああああああああああああああああああああああああああああああああ - - + + + {Object.keys(lineList_LineWebID).map((d) => ( + { + const id = stationIDPair[lineList_LineWebID[d]]; + const s = isSearchMode == id ? undefined : id; + if (!s) return; + setisSearchMode(s); + }} + key={stationIDPair[lineList_LineWebID[d]]} + > + + {stationIDPair[lineList_LineWebID[d]]} + + + ))} + {/* { //value={input} style={{ flex: 1 }} /> + */} - )} - + )} + ); }; diff --git a/menu.js b/menu.js index 60c57bc..14e3a88 100644 --- a/menu.js +++ b/menu.js @@ -19,7 +19,7 @@ import LED_vision from "./components/発車時刻表/LED_vidion"; import { TitleBar } from "./components/Menu/TitleBar"; import { FixedContentBottom } from "./components/Menu/FixedContentBottom"; -import { lineList } from "./lib/getStationList"; +import { lineList, stationIDPair } from "./lib/getStationList"; import { useFavoriteStation } from "./stateBox/useFavoriteStation"; import { useNavigation } from "@react-navigation/native"; import { useStationList } from "./stateBox/useStationList"; @@ -32,6 +32,7 @@ import { CarouselBox } from "./components/Menu/Carousel/CarouselBox"; import { CarouselTypeChanger } from "./components/Menu/Carousel/CarouselTypeChanger"; import { useUserPosition } from "./stateBox/useUserPosition"; import { AS } from "./storageControl"; +import { lineList_LineWebID } from "./lib/getStationList"; import { Ionicons } from "@expo/vector-icons"; import { SearchUnitBox } from "./components/Menu/RailScope/SearchUnitBox"; configureReanimatedLogger({ @@ -171,13 +172,26 @@ export default function Menu(props) { const [listIndex, setListIndex] = useState(0); const [listUpStation, setListUpStation] = useState([]); + const [isSearchMode, setisSearchMode] = useState(false); useEffect(() => { - if (stationListMode == "position") { + if (!!isSearchMode) { + const returnData = []; + Object.keys(lineList_LineWebID).forEach((d, indexBase) => { + originalStationList[d].forEach((D, index) => { + if (isSearchMode && isSearchMode != stationIDPair[lineList_LineWebID[d]]) return; + const latlng = [D.lat, D.lng]; + if (latlng.length == 0) return null; + returnData.push([D]); + }); + }); + setListUpStation(returnData); + } + else if (stationListMode == "position") { setListUpStation(nearPositionStation.filter((d) => d != undefined)); } else { setListUpStation(favoriteStation.filter((d) => d != undefined)); } - }, [nearPositionStation, favoriteStation, stationListMode]); + }, [nearPositionStation, favoriteStation, stationListMode, isSearchMode]); useEffect(() => { if (listUpStation.length == 0) { setListIndex(0); @@ -325,15 +339,18 @@ export default function Menu(props) { {...{ locationStatus, position, - mapsRef,scrollRef, + mapsRef, + scrollRef, stationListMode, setStationListMode, setSelectedCurrentStation: setListIndex, mapMode, setMapMode, + isSearchMode, + setisSearchMode, }} /> - )} + )} {originalStationList.length != 0 && ( <> @@ -373,6 +390,8 @@ export default function Menu(props) { setSelectedCurrentStation: setListIndex, mapMode, setMapMode, + isSearchMode, + setisSearchMode, }} /> )}