64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import React, { FC } from "react";
|
|
import { Image, StyleSheet, View } from "react-native";
|
|
import { Marker } from "react-native-maps";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import { useStationList } from "@/stateBox/useStationList";
|
|
import { StationProps } from "@/lib/CommonTypes";
|
|
|
|
type Props = {
|
|
index: number;
|
|
indexBase: number;
|
|
latlng: string[];
|
|
D: StationProps;
|
|
d: string;
|
|
navigate: (screen: string) => void;
|
|
webview: React.RefObject<any>;
|
|
};
|
|
|
|
export const MapPin: FC<Props> = (props) => {
|
|
const { index, indexBase, latlng, D, d, navigate, webview } = props;
|
|
const { goBack } = useNavigation();
|
|
const { getInjectJavascriptAddress } = useStationList();
|
|
|
|
return (
|
|
<Marker
|
|
key={index + indexBase}
|
|
coordinate={{
|
|
latitude: parseFloat(latlng[0]),
|
|
longitude: parseFloat(latlng[1]),
|
|
}}
|
|
anchor={{ x: 0.5, y: 1 }}
|
|
tracksViewChanges={false}
|
|
onPress={() => {
|
|
const address = getInjectJavascriptAddress(D.StationNumber);
|
|
if (!address) return;
|
|
webview.current?.injectJavaScript(address);
|
|
if (navigate) goBack();
|
|
}}
|
|
>
|
|
<View style={styles.markerWrap}>
|
|
<Image
|
|
source={require("../../assets/reccha-small.png")}
|
|
style={styles.markerImage}
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
</Marker>
|
|
);
|
|
};
|
|
|
|
const MAP_PIN_SIZE = Platform.OS === "android" ? 32 : 36;
|
|
|
|
const styles = StyleSheet.create({
|
|
markerWrap: {
|
|
width: MAP_PIN_SIZE,
|
|
height: MAP_PIN_SIZE,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
markerImage: {
|
|
width: MAP_PIN_SIZE,
|
|
height: MAP_PIN_SIZE,
|
|
},
|
|
});
|