CarouselBoxコンポーネントのrenderItem関数を分離し、MenuコンポーネントでのcurrentStationの管理をnearPositionStationに変更
This commit is contained in:
parent
748350178d
commit
35bb460b54
@ -46,6 +46,29 @@ export const CarouselBox = ({
|
|||||||
setDotButton(data === "true");
|
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 (
|
return (
|
||||||
<View style={{ flex: 1, paddingTop: 10 }}>
|
<View style={{ flex: 1, paddingTop: 10 }}>
|
||||||
<Carousel
|
<Carousel
|
||||||
@ -64,29 +87,7 @@ export const CarouselBox = ({
|
|||||||
parallaxAdjacentItemScale: 0.8,
|
parallaxAdjacentItemScale: 0.8,
|
||||||
}}
|
}}
|
||||||
onSnapToItem={setSelectedCurrentStation}
|
onSnapToItem={setSelectedCurrentStation}
|
||||||
renderItem={({ item, index }) => {
|
renderItem={RenderItem}
|
||||||
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>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
@ -99,25 +100,21 @@ export const CarouselBox = ({
|
|||||||
{originalStationList &&
|
{originalStationList &&
|
||||||
allStationData.map((d, index) => {
|
allStationData.map((d, index) => {
|
||||||
const active = index == selectedCurrentStation;
|
const active = index == selectedCurrentStation;
|
||||||
const numberIndex = d[0].StationNumber;
|
const numberKey = d[0].StationNumber + index;
|
||||||
if (dotButton) {
|
return dotButton ? (
|
||||||
return (
|
<StationNumber
|
||||||
<StationNumber
|
onPress={() => setSelectedCurrentStation(index)}
|
||||||
onPress={() => setSelectedCurrentStation(index)}
|
currentStation={d}
|
||||||
currentStation={d}
|
active={active}
|
||||||
active={active}
|
key={numberKey}
|
||||||
key={numberIndex + index}
|
/>
|
||||||
/>
|
) : (
|
||||||
);
|
<SimpleDot
|
||||||
} else {
|
onPress={() => setSelectedCurrentStation(index)}
|
||||||
return (
|
active={active}
|
||||||
<SimpleDot
|
key={numberKey}
|
||||||
onPress={() => setSelectedCurrentStation(index)}
|
/>
|
||||||
active={active}
|
);
|
||||||
key={numberIndex + index}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})}
|
})}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
33
menu.js
33
menu.js
@ -84,7 +84,8 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
|
|||||||
let returnDataBase = lineList
|
let returnDataBase = lineList
|
||||||
.map((d) => findStationEachLine(originalStationList[d]))
|
.map((d) => findStationEachLine(originalStationList[d]))
|
||||||
.filter((d) => {
|
.filter((d) => {
|
||||||
return d.length > 0})
|
return d.length > 0;
|
||||||
|
})
|
||||||
.reduce((pre, current) => {
|
.reduce((pre, current) => {
|
||||||
pre.push(...current);
|
pre.push(...current);
|
||||||
return pre;
|
return pre;
|
||||||
@ -92,14 +93,14 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
|
|||||||
if (returnDataBase.length) {
|
if (returnDataBase.length) {
|
||||||
let currentStation = currentStation == undefined ? [] : currentStation;
|
let currentStation = currentStation == undefined ? [] : currentStation;
|
||||||
if (currentStation.toString() != returnDataBase.toString()) {
|
if (currentStation.toString() != returnDataBase.toString()) {
|
||||||
setCurrentStation(returnDataBase);
|
setNearPositionStation(returnDataBase);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
setCurrentStation(undefined);
|
setNearPositionStation(undefined);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const [currentStation, setCurrentStation] = useState(undefined); //第三要素
|
const [nearPositionStation, setNearPositionStation] = useState(undefined); //第三要素
|
||||||
|
|
||||||
const carouselRef = useRef();
|
const carouselRef = useRef();
|
||||||
const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
|
const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
|
||||||
@ -107,16 +108,12 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
|
|||||||
const [allStationData, setAllStationData] = useState([]);
|
const [allStationData, setAllStationData] = useState([]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (stationListMode == "position") {
|
if (stationListMode == "position") {
|
||||||
console.log(currentStation);
|
console.log(nearPositionStation);
|
||||||
setAllStationData(
|
setAllStationData([nearPositionStation].filter((d) => d != undefined));
|
||||||
[currentStation].filter((d) => d != undefined)
|
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
setAllStationData(
|
setAllStationData(favoriteStation.filter((d) => d != undefined));
|
||||||
favoriteStation.filter((d) => d != undefined)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}, [currentStation, favoriteStation, stationListMode]);
|
}, [nearPositionStation, favoriteStation, stationListMode]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (allStationData.length == 0) {
|
if (allStationData.length == 0) {
|
||||||
setSelectedCurrentStation(0);
|
setSelectedCurrentStation(0);
|
||||||
@ -126,7 +123,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
|
|||||||
const count = selectedCurrentStation - 1;
|
const count = selectedCurrentStation - 1;
|
||||||
setSelectedCurrentStation(count);
|
setSelectedCurrentStation(count);
|
||||||
}
|
}
|
||||||
}, [selectedCurrentStation, currentStation, allStationData]);
|
}, [selectedCurrentStation, nearPositionStation, allStationData]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!carouselRef.current) return;
|
if (!carouselRef.current) return;
|
||||||
carouselRef?.current.scrollTo({
|
carouselRef?.current.scrollTo({
|
||||||
@ -136,12 +133,10 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
|
|||||||
}, [selectedCurrentStation]);
|
}, [selectedCurrentStation]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (originalStationList == undefined) return;
|
||||||
if (allStationData.length == 0) return;
|
if (allStationData.length == 0) return;
|
||||||
if (allStationData[selectedCurrentStation] == undefined) return;
|
if (allStationData[selectedCurrentStation] == undefined) return;
|
||||||
const { lat, lng } =
|
const { lat, lng } = allStationData[selectedCurrentStation][0];
|
||||||
originalStationList &&
|
|
||||||
allStationData[selectedCurrentStation] &&
|
|
||||||
allStationData[selectedCurrentStation][0];
|
|
||||||
const mapRegion = {
|
const mapRegion = {
|
||||||
latitude: lat,
|
latitude: lat,
|
||||||
longitude: lng,
|
longitude: lng,
|
||||||
@ -149,7 +144,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
|
|||||||
longitudeDelta: 0.05,
|
longitudeDelta: 0.05,
|
||||||
};
|
};
|
||||||
mapsRef.current.animateToRegion(mapRegion, 1000);
|
mapsRef.current.animateToRegion(mapRegion, 1000);
|
||||||
}, [selectedCurrentStation, currentStation, allStationData, mapsRef]);
|
}, [selectedCurrentStation, nearPositionStation, allStationData, mapsRef]);
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
@ -204,7 +199,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
|
|||||||
{...{
|
{...{
|
||||||
originalStationList,
|
originalStationList,
|
||||||
allStationData,
|
allStationData,
|
||||||
currentStation,
|
currentStation: nearPositionStation,
|
||||||
setSelectedCurrentStation,
|
setSelectedCurrentStation,
|
||||||
carouselRef,
|
carouselRef,
|
||||||
selectedCurrentStation,
|
selectedCurrentStation,
|
||||||
|
Loading…
Reference in New Issue
Block a user