トップメニューのデザイン改修と地図表示の最適化

components/trainMenu.js

@@ -1,82 +1,151 @@
-import React, { useState, useEffect, useRef } from 'react';
-import {View,Text,TouchableOpacity } 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';
+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}}, navigation:{ navigate }}){
-    const [stationData,setStationData] = useState(undefined);
-    const mapRef = useRef();
-    useEffect(()=>{
-        const HeaderConfig = {headers:{'referer':'https://train.jr-shikoku.co.jp/sp.html'}}
-
-        Promise.all([
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan', HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima',HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima2',HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan',HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan2',HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=koutoku',HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=tokushima',HeaderConfig).then(response => response.json()),
-            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto',HeaderConfig).then(response => response.json())
-        ]).then(values =>{
-            let stationList = {};
-            [stationList.yosan, stationList.uwajima, stationList.uwajima2, stationList.dosan, stationList.dosan2, stationList.koutoku, stationList.tokushima, stationList.naruto] = values;
-            setStationData(stationList);
-        })
-    },[]);
-    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: 34.194594,
-                longitude: 133.679633,
-                latitudeDelta: 0.5, //小さくなるほどズーム
-                longitudeDelta: 0.5,}}>
-                    {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")}>お気に入り</UsefulBox>
-            <UsefulBox backgroundColor={"#91C31F"} icon="clipboard-list-outline" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/e5489/")}>予約</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>
-    )
+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 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>
+  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>
-  )
-}
+  );
+};