CarouselBoxコンポーネントのrenderItem関数を分離し、MenuコンポーネントでのcurrentStationの管理をnearPositionStationに変更

This commit is contained in:
harukin-expo-dev-env
2025-04-13 16:54:02 +00:00
parent 748350178d
commit 35bb460b54
2 changed files with 53 additions and 61 deletions

View File

@@ -46,6 +46,29 @@ export const CarouselBox = ({
setDotButton(data === "true");
});
}, []);
const RenderItem = ({ item, index }) => {
return (
<View
style={{
backgroundColor: "#0000",
width,
flexDirection: "row",
marginLeft: 0,
marginRight: 0,
}}
key={item[0].StationNumber}
>
<View style={{ flex: 1 }} />
<Sign
stationID={item[0].StationNumber}
isCurrentStation={item == currentStation}
oP={oPSign}
oLP={oLPSign}
/>
<View style={{ flex: 1 }} />
</View>
);
};
return (
<View style={{ flex: 1, paddingTop: 10 }}>
<Carousel
@@ -64,29 +87,7 @@ export const CarouselBox = ({
parallaxAdjacentItemScale: 0.8,
}}
onSnapToItem={setSelectedCurrentStation}
renderItem={({ item, index }) => {
return (
<View
style={{
backgroundColor: "#0000",
width,
flexDirection: "row",
marginLeft: 0,
marginRight: 0,
}}
key={item[0].StationNumber}
>
<View style={{ flex: 1 }} />
<Sign
stationID={item[0].StationNumber}
isCurrentStation={item == currentStation}
oP={oPSign}
oLP={oLPSign}
/>
<View style={{ flex: 1 }} />
</View>
);
}}
renderItem={RenderItem}
/>
<View
style={{
@@ -99,25 +100,21 @@ export const CarouselBox = ({
{originalStationList &&
allStationData.map((d, index) => {
const active = index == selectedCurrentStation;
const numberIndex = d[0].StationNumber;
if (dotButton) {
return (
<StationNumber
onPress={() => setSelectedCurrentStation(index)}
currentStation={d}
active={active}
key={numberIndex + index}
/>
);
} else {
return (
<SimpleDot
onPress={() => setSelectedCurrentStation(index)}
active={active}
key={numberIndex + index}
/>
);
}
const numberKey = d[0].StationNumber + index;
return dotButton ? (
<StationNumber
onPress={() => setSelectedCurrentStation(index)}
currentStation={d}
active={active}
key={numberKey}
/>
) : (
<SimpleDot
onPress={() => setSelectedCurrentStation(index)}
active={active}
key={numberKey}
/>
);
})}
</View>
</View>