地図表示の挙動変更、位置情報への移動ボタンを実装

This commit is contained in:
harukin-expo-dev-env 2025-07-07 13:34:13 +00:00
parent 249f09bbc7
commit 3da4986a7c
10 changed files with 103 additions and 25 deletions

View File

@ -33,7 +33,7 @@ export const LandscapeTrainInfo = (props) => {
stickyHeaderIndices={[1]} stickyHeaderIndices={[1]}
scrollEventThrottle={16} scrollEventThrottle={16}
onScroll={(d) => { onScroll={(d) => {
console.log(d.nativeEvent.contentOffset.y); // Handle scroll events
}} }}
> >
<View style={{ height: 0 }} /> <View style={{ height: 0 }} />

View File

@ -51,7 +51,6 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
) )
.then((d) => d.json()) .then((d) => d.json())
.then((d) => { .then((d) => {
console.log(d);
if (d.trainStatus == "") { if (d.trainStatus == "") {
//setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"}); //setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
} else if (d.trainStatus == "▲") { } else if (d.trainStatus == "▲") {
@ -76,7 +75,6 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
) )
.then((d) => d.json()) .then((d) => d.json())
.then((d) => { .then((d) => {
console.log(d);
if (d.trainStatus == "") { if (d.trainStatus == "") {
//setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"}); //setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
} else if (d.trainStatus == "▲") { } else if (d.trainStatus == "▲") {

View File

@ -18,6 +18,7 @@ import { TrainBusButton } from "./StationDeteilView/TrainBusButton";
import { 駅構内図 } from "./StationDeteilView/StationInsideMapButton"; import { 駅構内図 } from "./StationDeteilView/StationInsideMapButton";
import { WebSiteButton } from "./StationDeteilView/WebSiteButton"; import { WebSiteButton } from "./StationDeteilView/WebSiteButton";
import { StationTimeTableButton } from "./StationDeteilView/StationTimeTableButton"; import { StationTimeTableButton } from "./StationDeteilView/StationTimeTableButton";
import { StationTrainPositionButton } from "./StationDeteilView/StationTrainPositionButton";
export const StationDeteilView = (props) => { export const StationDeteilView = (props) => {
if (!props.payload) return <></>; if (!props.payload) return <></>;
@ -104,16 +105,23 @@ export const StationDeteilView = (props) => {
} }
/> />
</View> </View>
{currentStation[0].JrHpUrl && <View style={{ flexDirection: "row" }}>
currentStation[0].StationNumber != "M12" && ( <StationTrainPositionButton
<駅構内図 //児島例外/ stationNumber={currentStation[0].StationNumber}
navigate={navigate} onExit={onExit}
goTo={goTo} navigate={navigate}
useShow={useShow} />
address={currentStation[0].JrHpUrl} {currentStation[0].JrHpUrl &&
onExit={onExit} currentStation[0].StationNumber != "M12" && (
/> <駅構内図 //児島例外/
)} navigate={navigate}
goTo={goTo}
useShow={useShow}
address={currentStation[0].JrHpUrl}
onExit={onExit}
/>
)}
</View>
<View style={{ flexDirection: "row" }}> <View style={{ flexDirection: "row" }}>
{!currentStation[0].JrHpUrl || ( {!currentStation[0].JrHpUrl || (
<WebSiteButton <WebSiteButton
@ -135,7 +143,12 @@ export const StationDeteilView = (props) => {
useShow={useShow} useShow={useShow}
/> />
)} )}
<StationMapButton stationMap={currentStation[0].StationMap || `https://www.google.co.jp/maps/place/${currentStation[0].lat},${currentStation[0].lng}`} /> <StationMapButton
stationMap={
currentStation[0].StationMap ||
`https://www.google.co.jp/maps/place/${currentStation[0].lat},${currentStation[0].lng}`
}
/>
{!trainBus || ( {!trainBus || (
<TrainBusButton <TrainBusButton
address={trainBus.address} address={trainBus.address}

View File

@ -19,6 +19,7 @@ export const 駅構内図:FC<Props> = (props) => {
alignContent: "center", alignContent: "center",
alignItems: "center", alignItems: "center",
margin: 2, margin: 2,
flex: 1,
}} }}
onPress={() => { onPress={() => {
navigate("howto", { info, goTo, useShow }); navigate("howto", { info, goTo, useShow });

View File

@ -0,0 +1,54 @@
import { FC } from "react";
import { TouchableOpacity, View, Text, Linking } from "react-native";
import { useStationList } from "@/stateBox/useStationList";
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
import AntDesign from "react-native-vector-icons/AntDesign";
type Props = {
stationNumber: string;
onExit: () => void;
navigate?: (screen: string, params: { screen: string }) => void;
};
export const StationTrainPositionButton: FC<Props> = (props) => {
const { stationNumber, onExit, navigate } = props;
const {
inject,
} = useCurrentTrain();
const { getInjectJavascriptAddress } = useStationList();
return (
<TouchableOpacity
style={{
height: 50,
backgroundColor: "#0099CC",
flexDirection: "row",
alignContent: "center",
alignItems: "center",
margin: 2,
flex: 1
}}
onPress={() => {
navigate("positions", { screen: "Apps" });
const script = getInjectJavascriptAddress(stationNumber);
inject(script);
onExit();
}}
>
<View style={{ flex: 1 }} />
<AntDesign
name={"barchart"}
size={20}
color={"white"}
style={{ marginHorizontal: 5, marginVertical: 5 }}
/>
<Text
style={{
color: "white",
textAlign: "center",
textAlignVertical: "center",
}}
>
</Text>
<View style={{ flex: 1 }} />
</TouchableOpacity>
);
};

View File

@ -29,8 +29,7 @@ export const CarouselBox = ({
useEffect(() => { useEffect(() => {
if (!carouselBadgeScrollViewRef.current) return; if (!carouselBadgeScrollViewRef.current) return;
const scrollToIndex = listIndex * (width / listUpStation.length) + 10; const scrollToIndex = (dotButton ? 28 : 22) * listIndex - (width / 2) + (dotButton ? 28 : 22) - 5;
console.log("scrollToIndex", scrollToIndex);
carouselBadgeScrollViewRef.current.scrollTo({ carouselBadgeScrollViewRef.current.scrollTo({
x: scrollToIndex, x: scrollToIndex,
animated: true, animated: true,

View File

@ -8,7 +8,6 @@ import { AS } from "../../../storageControl";
export const FavoriteSettingsItem = ({ currentStation }) => { export const FavoriteSettingsItem = ({ currentStation }) => {
const lineIDs = []; const lineIDs = [];
const EachIDs = []; const EachIDs = [];
console.log(currentStation);
currentStation.forEach((d) => { currentStation.forEach((d) => {
if (!d.StationNumber) return; if (!d.StationNumber) return;
const textArray = d.StationNumber.split(""); const textArray = d.StationNumber.split("");

27
menu.js
View File

@ -178,18 +178,30 @@ export default function Menu(props) {
const returnData = []; const returnData = [];
Object.keys(lineList_LineWebID).forEach((d, indexBase) => { Object.keys(lineList_LineWebID).forEach((d, indexBase) => {
originalStationList[d].forEach((D, index) => { originalStationList[d].forEach((D, index) => {
if (isSearchMode && isSearchMode != stationIDPair[lineList_LineWebID[d]]) return; if (
isSearchMode &&
isSearchMode != stationIDPair[lineList_LineWebID[d]]
)
return;
const latlng = [D.lat, D.lng]; const latlng = [D.lat, D.lng];
if (latlng.length == 0) return null; if (latlng.length == 0) return null;
if(D.StationNumber == undefined) { if (D.StationNumber == undefined) {
return null; return null;
} }
returnData.push([D]); 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
);
}
setListUpStation(returnData); setListUpStation(returnData);
} } else if (stationListMode == "position") {
else if (stationListMode == "position") {
setListUpStation(nearPositionStation.filter((d) => d != undefined)); setListUpStation(nearPositionStation.filter((d) => d != undefined));
} else { } else {
setListUpStation(favoriteStation.filter((d) => d != undefined)); setListUpStation(favoriteStation.filter((d) => d != undefined));
@ -200,12 +212,16 @@ export default function Menu(props) {
setListIndex(0); setListIndex(0);
return; return;
} }
if (listUpStation.length == 1) {
setListIndex(0);
return;
}
if (listUpStation[listIndex] == undefined) { if (listUpStation[listIndex] == undefined) {
const count = listIndex - 1; const count = listIndex - 1;
setMapMode(false); setMapMode(false);
setListIndex(count); setListIndex(count);
} }
}, [listIndex, nearPositionStation, listUpStation]); }, [listIndex, nearPositionStation, listUpStation, isSearchMode]);
useEffect(() => { useEffect(() => {
if (originalStationList == undefined) return; if (originalStationList == undefined) return;
if (listUpStation.length == 0) return; if (listUpStation.length == 0) return;
@ -258,7 +274,6 @@ export default function Menu(props) {
}} }}
onScrollBeginDrag={onScrollBeginDrag} onScrollBeginDrag={onScrollBeginDrag}
onScrollEndDrag={(e) => { onScrollEndDrag={(e) => {
console.log(e.nativeEvent.velocity);
if (e.nativeEvent.contentOffset.y < mapHeight - 80) { if (e.nativeEvent.contentOffset.y < mapHeight - 80) {
if (scrollStartPosition > e.nativeEvent.contentOffset.y) { if (scrollStartPosition > e.nativeEvent.contentOffset.y) {
goToMap(); goToMap();

View File

@ -15,7 +15,7 @@ const initialState = {
currentTrainLoading: "loading", currentTrainLoading: "loading",
setCurrentTrainLoading: () => {}, setCurrentTrainLoading: () => {},
getCurrentTrain: () => {}, getCurrentTrain: () => {},
inject: () => {}, inject: (i) => {},
}; };
const CurrentTrainContext = createContext(initialState); const CurrentTrainContext = createContext(initialState);

View File

@ -92,7 +92,6 @@ export const StationListProvider: FC<Props> = ({ children }) => {
return; return;
} }
if (x.StationNumber == StationNumber) { if (x.StationNumber == StationNumber) {
console.log(originalStationList[d]);
if (!x.MyStation) findNearStations = true; if (!x.MyStation) findNearStations = true;
else bootStationList.push({ line: lineName, station: x }); else bootStationList.push({ line: lineName, station: x });
} }