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(() => {
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({
x: scrollToIndex,
animated: true,
@ -64,13 +65,6 @@ export const CarouselBox = ({
setDotButton(data === "true");
});
}, []);
useEffect(() => {
if (!carouselRef.current) return;
carouselRef?.current.scrollTo({
count: listIndex - carouselRef.current.getCurrentIndex(),
animated: true,
});
}, [listIndex]);
const RenderItem = ({ item, index }) => {
return (
<View
@ -141,8 +135,11 @@ export const CarouselBox = ({
parallaxScrollingOffset: 100,
parallaxAdjacentItemScale: 0.8,
}}
scrollAnimationDuration={600}
onSnapToItem={setListIndex}
renderItem={RenderItem}
overscrollEnabled={false}
defaultIndex={listIndex >= listUpStation.length ? 0 : listIndex}
/>
<ScrollView
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 {
Platform,
View,
@ -173,7 +173,7 @@ export default function Menu(props) {
const [listUpStation, setListUpStation] = useState([]);
const [isSearchMode, setisSearchMode] = useState(false);
useEffect(() => {
useLayoutEffect(() => {
if (!!isSearchMode) {
const returnData = [];
Object.keys(lineList_LineWebID).forEach((d, indexBase) => {
@ -191,20 +191,16 @@ export default function Menu(props) {
returnData.push([D]);
});
});
if (mapMode) {
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
);
}
if (JSON.stringify(returnData) == JSON.stringify(listUpStation)) return;
setListUpStation(returnData);
} 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 {
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]);
useEffect(() => {
@ -221,7 +217,7 @@ export default function Menu(props) {
setMapMode(false);
setListIndex(count);
}
}, [listIndex, nearPositionStation, listUpStation, isSearchMode]);
}, [listIndex, listUpStation, isSearchMode]);
useEffect(() => {
if (originalStationList == undefined) return;
if (listUpStation.length == 0) return;
@ -233,9 +229,18 @@ export default function Menu(props) {
latitudeDelta: 0.05,
longitudeDelta: 0.05,
};
if (mapMode) return;
mapsRef.current.animateToRegion(mapRegion, 1000);
}, [listIndex, nearPositionStation, listUpStation, mapsRef]);
if (mapMode) {
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
);
} else {
mapsRef.current.animateToRegion(mapRegion, 1000);
}
}, [listIndex, listUpStation]);
return (
<View
@ -249,19 +254,20 @@ export default function Menu(props) {
{!mapMode ? (
<TitleBar />
) : (
<Text
style={{
fontSize: 30,
color: "#0099CC",
fontWeight: "bold",
position: "absolute",
top: 0,
zIndex: 1000,
fontStyle: "italic",
}}
>
JRShikoku RailScope
</Text>
<></>
// <Text
// style={{
// fontSize: 30,
// color: "#0099CC",
// fontWeight: "bold",
// position: "absolute",
// top: 0,
// zIndex: 1000,
// fontStyle: "italic",
// }}
// >
// JRShikoku RailScope
// </Text>
)}
<ScrollView
ref={scrollRef}