152 lines
4.4 KiB
JavaScript
152 lines
4.4 KiB
JavaScript
import React, { useState, useEffect, useRef } from "react";
|
|
import { View, Text, TouchableOpacity, Linking } from "react-native";
|
|
import { WebView } from "react-native-webview";
|
|
import StatusbarDetect from "../StatusbarDetect";
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
import MapView, { Marker, Geojson, PROVIDER_GOOGLE } from "react-native-maps";
|
|
import {
|
|
FontAwesome,
|
|
Fontisto,
|
|
Foundation,
|
|
Ionicons,
|
|
MaterialCommunityIcons,
|
|
} from "@expo/vector-icons";
|
|
var Status = StatusbarDetect();
|
|
export default function trainMenu({
|
|
route: {
|
|
params: { webview, stationData },
|
|
},
|
|
navigation: { navigate },
|
|
}) {
|
|
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")}
|
|
>
|
|
使い方
|
|
</UsefulBox>
|
|
<UsefulBox
|
|
backgroundColor={"#EA4752"}
|
|
icon="star"
|
|
flex={1}
|
|
onPressButton={() =>
|
|
/* Linking.openURL(
|
|
"https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
|
|
) */
|
|
alert("お気に入り駅登録機能は現在開発中です！レイアウト募集中！")
|
|
}
|
|
>
|
|
お気に入り
|
|
</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={() => {
|
|
AsyncStorage.setItem("status", "2022/04/14");
|
|
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>
|
|
);
|
|
};
|