harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

カルーセルの挙動を修正、バッジのサイズとスクロールの調整

Browse Source
This commit is contained in:
harukin-expo-dev-env 2025-07-08 12:23:29 +00:00
parent 72e7894725
commit d586bc562f
2 changed files with 41 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/Menu/Carousel/CarouselBox.tsx
View File

@ -29,7 +29,8 @@ export const CarouselBox = ({
useEffect(() => { useEffect(() => {
if (!carouselBadgeScrollViewRef.current) return; if (!carouselBadgeScrollViewRef.current) return;
const scrollToIndex = (dotButton ? 28 : 22) * listIndex - (width / 2) + (dotButton ? 28 : 22) - 5; const dotSize = dotButton ? 28 : 24;
const scrollToIndex = dotSize * listIndex - width / 2 + dotSize - 5;
carouselBadgeScrollViewRef.current.scrollTo({ carouselBadgeScrollViewRef.current.scrollTo({
x: scrollToIndex, x: scrollToIndex,
animated: true, animated: true,
@ -64,13 +65,6 @@ export const CarouselBox = ({
setDotButton(data === "true"); setDotButton(data === "true");
}); });
}, []); }, []);
useEffect(() => {
if (!carouselRef.current) return;
carouselRef?.current.scrollTo({
count: listIndex - carouselRef.current.getCurrentIndex(),
animated: true,
});
}, [listIndex]);
const RenderItem = ({ item, index }) => { const RenderItem = ({ item, index }) => {
return ( return (
<View <View
@ -141,8 +135,11 @@ export const CarouselBox = ({
parallaxScrollingOffset: 100, parallaxScrollingOffset: 100,
parallaxAdjacentItemScale: 0.8, parallaxAdjacentItemScale: 0.8,
}} }}
scrollAnimationDuration={600}
onSnapToItem={setListIndex} onSnapToItem={setListIndex}
renderItem={RenderItem} renderItem={RenderItem}
overscrollEnabled={false}
defaultIndex={listIndex >= listUpStation.length ? 0 : listIndex}
/> />
<ScrollView <ScrollView
horizontal horizontal

66
menu.js
View File

@ -1,4 +1,4 @@
import React, { useRef, useState, useEffect } from "react"; import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
import { import {
Platform, Platform,
View, View,
@ -173,7 +173,7 @@ export default function Menu(props) {
const [listUpStation, setListUpStation] = useState([]); const [listUpStation, setListUpStation] = useState([]);
const [isSearchMode, setisSearchMode] = useState(false); const [isSearchMode, setisSearchMode] = useState(false);
useEffect(() => { useLayoutEffect(() => {
if (!!isSearchMode) { if (!!isSearchMode) {
const returnData = []; const returnData = [];
Object.keys(lineList_LineWebID).forEach((d, indexBase) => { Object.keys(lineList_LineWebID).forEach((d, indexBase) => {
@ -191,20 +191,16 @@ export default function Menu(props) {
returnData.push([D]); returnData.push([D]);
}); });
}); });
if (mapMode) { if (JSON.stringify(returnData) == JSON.stringify(listUpStation)) return;
mapsRef?.current.fitToCoordinates(
listUpStation.map((d) => ({
latitude: parseFloat(d[0].lat),
longitude: parseFloat(d[0].lng),
})),
{ edgePadding: { top: 80, bottom: 120, left: 50, right: 50 } } // Add margin values here
);
}
setListUpStation(returnData); setListUpStation(returnData);
} else if (stationListMode == "position") { } else if (stationListMode == "position") {
setListUpStation(nearPositionStation.filter((d) => d != undefined)); const returnData = nearPositionStation.filter((d) => d != undefined);
if (JSON.stringify(returnData) == JSON.stringify(listUpStation)) return;
setListUpStation(returnData);
} else { } else {
setListUpStation(favoriteStation.filter((d) => d != undefined)); const returnData = favoriteStation.filter((d) => d != undefined);
if (JSON.stringify(returnData) == JSON.stringify(listUpStation)) return;
setListUpStation(returnData);
} }
}, [nearPositionStation, favoriteStation, stationListMode, isSearchMode]); }, [nearPositionStation, favoriteStation, stationListMode, isSearchMode]);
useEffect(() => { useEffect(() => {
@ -221,7 +217,7 @@ export default function Menu(props) {
setMapMode(false); setMapMode(false);
setListIndex(count); setListIndex(count);
} }
}, [listIndex, nearPositionStation, listUpStation, isSearchMode]); }, [listIndex, listUpStation, isSearchMode]);
useEffect(() => { useEffect(() => {
if (originalStationList == undefined) return; if (originalStationList == undefined) return;
if (listUpStation.length == 0) return; if (listUpStation.length == 0) return;
@ -233,9 +229,18 @@ export default function Menu(props) {
latitudeDelta: 0.05, latitudeDelta: 0.05,
longitudeDelta: 0.05, longitudeDelta: 0.05,
}; };
if (mapMode) return; if (mapMode) {
mapsRef.current.animateToRegion(mapRegion, 1000); mapsRef?.current.fitToCoordinates(
}, [listIndex, nearPositionStation, listUpStation, mapsRef]); listUpStation.map((d) => ({
latitude: parseFloat(d[0].lat),
longitude: parseFloat(d[0].lng),
})),
{ edgePadding: { top: 80, bottom: 120, left: 50, right: 50 } } // Add margin values here
);
} else {
mapsRef.current.animateToRegion(mapRegion, 1000);
}
}, [listIndex, listUpStation]);
return ( return (
<View <View
@ -249,19 +254,20 @@ export default function Menu(props) {
{!mapMode ? ( {!mapMode ? (
<TitleBar /> <TitleBar />
) : ( ) : (
<Text <></>
style={{ // <Text
fontSize: 30, // style={{
color: "#0099CC", // fontSize: 30,
fontWeight: "bold", // color: "#0099CC",
position: "absolute", // fontWeight: "bold",
top: 0, // position: "absolute",
zIndex: 1000, // top: 0,
fontStyle: "italic", // zIndex: 1000,
}} // fontStyle: "italic",
> // }}
JRShikoku RailScope // >
</Text> // JRShikoku RailScope
// </Text>
)} )}
<ScrollView <ScrollView
ref={scrollRef} ref={scrollRef}