131 lines
3.8 KiB
JavaScript
131 lines
3.8 KiB
JavaScript
import React, { useRef } from "react";
|
|
import { View, Text, TouchableOpacity, Linking } from "react-native";
|
|
import MapView, { Marker } from "react-native-maps";
|
|
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
|
export default function TrainMenu({
|
|
navigation: { navigate },
|
|
webview,
|
|
stationData,
|
|
}) {
|
|
const mapRef = useRef();
|
|
return (
|
|
<View style={{ height: "100%", backgroundColor: "#0099CC" }}>
|
|
<MapView
|
|
style={{ flex: 1, width: "100%", height: "100%" }}
|
|
showsUserLocation={true}
|
|
loadingEnabled={true}
|
|
showsMyLocationButton={false}
|
|
moveOnMarkerPress={false}
|
|
showsCompass={false}
|
|
ref={mapRef}
|
|
//provider={PROVIDER_GOOGLE}
|
|
initialRegion={{
|
|
latitude: 33.774519,
|
|
longitude: 133.533306,
|
|
latitudeDelta: 1.8, //小さくなるほどズーム
|
|
longitudeDelta: 1.8,
|
|
}}
|
|
>
|
|
{stationData &&
|
|
Object.keys(stationData).map((d) =>
|
|
stationData[d].map((D, index) => {
|
|
if (!D.StationMap) return null;
|
|
const latlng = D.StationMap.replace(
|
|
"https://www.google.co.jp/maps/place/",
|
|
""
|
|
).split(",");
|
|
if (latlng.length == 0) return null;
|
|
return (
|
|
<Marker
|
|
key={index}
|
|
coordinate={{
|
|
latitude: parseFloat(latlng[0]),
|
|
longitude: parseFloat(latlng[1]),
|
|
}}
|
|
onPress={() => {
|
|
webview.current?.injectJavaScript(
|
|
`MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}')`
|
|
);
|
|
navigate("Apps");
|
|
}}
|
|
></Marker>
|
|
);
|
|
})
|
|
)}
|
|
</MapView>
|
|
<View style={{ flexDirection: "row" }}>
|
|
<UsefulBox
|
|
backgroundColor={"#F89038"}
|
|
icon="train-car"
|
|
flex={1}
|
|
onPressButton={() =>
|
|
navigate("howto", {
|
|
info: "https://train.jr-shikoku.co.jp/usage.htm",
|
|
})
|
|
}
|
|
>
|
|
使い方
|
|
</UsefulBox>
|
|
<UsefulBox
|
|
backgroundColor={"#EA4752"}
|
|
icon="star"
|
|
flex={1}
|
|
onPressButton={() => navigate("favoriteList")}
|
|
>
|
|
お気に入り
|
|
</UsefulBox>
|
|
<UsefulBox
|
|
backgroundColor={"#91C31F"}
|
|
icon="clipboard-list-outline"
|
|
flex={1}
|
|
onPressButton={() =>
|
|
Linking.openURL(
|
|
"https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2"
|
|
)
|
|
}
|
|
>
|
|
この機能のフィードバック
|
|
</UsefulBox>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={{
|
|
padding: 10,
|
|
flexDirection: "row",
|
|
borderColor: "white",
|
|
borderWidth: 1,
|
|
margin: 10,
|
|
borderRadius: 5,
|
|
alignItems: "center",
|
|
}}
|
|
onPress={() => navigate("Apps")}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
|
|
閉じる
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
const UsefulBox = (props) => {
|
|
const { icon, backgroundColor, flex, onPressButton, children } = props;
|
|
return (
|
|
<TouchableOpacity
|
|
style={{
|
|
flex: flex,
|
|
backgroundColor: backgroundColor,
|
|
padding: 10,
|
|
alignItems: "center",
|
|
margin: 2,
|
|
}}
|
|
onPress={onPressButton}
|
|
>
|
|
<MaterialCommunityIcons name={icon} color="white" size={50} />
|
|
<Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
|
|
{children}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|