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

Apps.js

@@ -1,28 +1,102 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {View, Platform,ToastAndroid, Text, TouchableOpacity} from 'react-native';
-import {WebView} from 'react-native-webview';
-import Constants from 'expo-constants';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import React, { useEffect, useRef, useState } from "react";
+import {
+  View,
+  Platform,
+  ToastAndroid,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import { WebView } from "react-native-webview";
+import Constants from "expo-constants";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
 
 export var webview = null;
 
-export default function Apps (props) {
-  const { navigation: { navigate } } = props;
-  var urlcache="";
+export default function Apps(props) {
+  const {
+    navigation: { navigate },
+  } = props;
+  var urlcache = "";
   const webview = useRef();
-  const [iconSetting, setIconSetting] = useState(undefined)
+  const [iconSetting, setIconSetting] = useState(undefined);
   const [mapSwitch, setMapSwitch] = useState(undefined);
 
+  const [stationData, setStationData] = useState(undefined);
+  useEffect(() => {
+    const HeaderConfig = {
+      headers: { referer: "https://train.jr-shikoku.co.jp/sp.html" },
+    };
 
-  const bootData = `
-  document.getElementById('header').querySelector('a').style.display = 'none';
-  document.getElementById('header').style.height = '50px';
-  document.getElementById('main').style.paddingTop = '54px';
+    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);
+    });
+  }, []);
 
-  document.getElementById('headerStr').style.display = 'none';
+  const topMenu =
+    mapSwitch != "true"
+      ? `
+document.getElementById('header').querySelector('a').style.display = 'none';
+document.getElementById('header').style.height = '50px';
+document.getElementById('main').style.paddingTop = '54px';
+
+document.getElementById('headerStr').style.display = 'none';
+`
+      : `
+document.getElementsByClassName('accordionClass')[0].style.display = 'none';
+document.getElementById('header').style.display = 'none';
+document.getElementById('main').style.paddingTop = '0px';
+document.getElementById('headerStr').style.display = 'none';
+`;
+  const bootData =
+    topMenu +
+    `
   const setReload = () =>{
     try{
       document.getElementById('refreshIcon').click();
@@ -35,7 +109,7 @@ export default function Apps (props) {
   setReload();
 `;
 
-const trainIconMaker = `
+  const trainIconMaker = `
   const setStationIcon = (行き先アイコン,img) =>{
     let newItem = document.createElement("div");
     if(行き先アイコン.getAttribute("style").includes("left")){
@@ -46,11 +120,11 @@ const trainIconMaker = `
     }
     行き先アイコン.remove();
   }
-`
+`;
 
-
-
-const trainIcon = iconSetting == "true" ?  `
+  const trainIcon =
+    iconSetting == "true"
+      ? `
 switch(列番データ){
   //しおかぜメイン
   //8000 ノーマル
@@ -467,12 +541,16 @@ switch(列番データ){
   default:
     break;
 }
-` : ``;
+`
+      : ``;
 
-const JRF_icon  = iconSetting == "true" ? `
+  const JRF_icon =
+    iconSetting == "true"
+      ? `
   JRF || setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/ef210a.png');
-` : ``;
-const normal_train_name = `
+`
+      : ``;
+  const normal_train_name = `
   if(new RegExp(/^4[1-9]\\d\\d[DM]$/).test(列番データ) || new RegExp(/^5[1-7]\\d\\d[DM]$/).test(列番データ)){
     行き先情報.innerText = "ワンマン\\n"+行き先情報.innerText;
     flag=true;
@@ -492,8 +570,9 @@ const normal_train_name = `
   else if(列番データ.indexOf("S") != -1){
     行き先情報.innerText = 行き先情報.innerText+"臨時列車\\n";
   }
-`
-const JRF_name = `
+`;
+  const JRF_name =
+    `
   let JRF = false;
   switch(列番データ){
     case "71":
@@ -538,7 +617,7 @@ const JRF_name = `
     default:
       JRF = true;
   }
-  `+JRF_icon;
+  ` + JRF_icon;
 
   const TKT_name = `
     //安芸行と併結列車を個別に表示、それ以外をdefaultで下りなら既定の行き先を、上りなら奈半利行を設定
@@ -575,9 +654,10 @@ const JRF_name = `
         break;
     }
   
-`
+`;
 
-const textInsert = `
+  const textInsert =
+    `
 const setStrings = () =>{
   try {
   var elements = document.querySelectorAll('[onclick]');
@@ -588,7 +668,12 @@ const setStrings = () =>{
     var flag=false;
     var TrainType = undefined;
     if(行き先情報.innerText.includes(列番データ))continue; //回避
-    `+trainIcon+normal_train_name+JRF_name+TKT_name+`
+    ` +
+    trainIcon +
+    normal_train_name +
+    JRF_name +
+    TKT_name +
+    `
     //列番付与
     行き先情報.innerText = 行き先情報.innerText+列番データ+(JRF ? "":"レ");
   }
@@ -686,89 +771,134 @@ observer.observe(target, {
     childList: true, // 子ノードの変化を監視
     //subtree: true // 子孫ノードも監視対象に含める
 });
-`
+`;
 
-const injectJavascriptData = bootData+trainIconMaker+textInsert;
+  const injectJavascriptData = bootData + trainIconMaker + textInsert;
 
-
-
-  useEffect(()=>{
+  useEffect(() => {
     AsyncStorage.getItem("status")
-    .then(d=>{
-      if(d != "2022/06/11"){
-        navigate('news');
-      }
-    })
-    .catch(e=>{
-      navigate('news');
-    })
-  },[])
-  useEffect(()=>{
-    AsyncStorage.getItem("iconSwitch").then( d =>{
-      if(d){
-        setIconSetting(d);
-      }
-      else{
-        AsyncStorage.setItem("iconSwitch","true").then(()=>Updates.reloadAsync())
-      }
-      
-       
-    }).catch(d=>AsyncStorage.setItem("iconSwitch","true").then(()=>Updates.reloadAsync()))
-
-
-    AsyncStorage.getItem("mapSwitch").then( d =>{
-      if(d){
-        setMapSwitch(d);
-      }
-      else{
-        AsyncStorage.setItem("mapSwitch","false").then(()=>Updates.reloadAsync())
-      }
-    }).catch(d=>AsyncStorage.setItem("mapSwitch","false").then(()=>Updates.reloadAsync()))
-
-  },[])
-
-
+      .then((d) => {
+        if (d != "2022/06/11") {
+          navigate("news");
+        }
+      })
+      .catch((e) => {
+        navigate("news");
+      });
+  }, []);
+  useEffect(() => {
+    AsyncStorage.getItem("iconSwitch")
+      .then((d) => {
+        if (d) {
+          setIconSetting(d);
+        } else {
+          AsyncStorage.setItem("iconSwitch", "true").then(() =>
+            Updates.reloadAsync()
+          );
+        }
+      })
+      .catch((d) =>
+        AsyncStorage.setItem("iconSwitch", "true").then(() =>
+          Updates.reloadAsync()
+        )
+      );
 
+    AsyncStorage.getItem("mapSwitch")
+      .then((d) => {
+        if (d) {
+          setMapSwitch(d);
+        } else {
+          AsyncStorage.setItem("mapSwitch", "false").then(() =>
+            Updates.reloadAsync()
+          );
+        }
+      })
+      .catch((d) =>
+        AsyncStorage.setItem("mapSwitch", "false").then(() =>
+          Updates.reloadAsync()
+        )
+      );
+  }, []);
 
   return (
-    <View style={{height:"100%",paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight: 0,}}>
+    <View
+      style={{
+        height: "100%",
+        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+      }}
+    >
       {/* {Status} */}
       <WebView
-      useWebKit={true}
-      ref={webview}
-      source={{uri: 'https://train.jr-shikoku.co.jp/sp.html'}} 
-      originWhitelist={['https://train.jr-shikoku.co.jp','https://train.jr-shikoku.co.jp/sp.html']} 
-      mixedContentMode={'compatibility'}
-      javaScriptEnabled={true}
-      allowsBackForwardNavigationGestures={true}
-      setSupportMultipleWindows={false}
-      onNavigationStateChange={
-        event =>{
+        useWebKit={true}
+        ref={webview}
+        source={{ uri: "https://train.jr-shikoku.co.jp/sp.html" }}
+        originWhitelist={[
+          "https://train.jr-shikoku.co.jp",
+          "https://train.jr-shikoku.co.jp/sp.html",
+        ]}
+        mixedContentMode={"compatibility"}
+        javaScriptEnabled={true}
+        allowsBackForwardNavigationGestures={true}
+        setSupportMultipleWindows={false}
+        onNavigationStateChange={(event) => {
           console.log(event);
-          if(event.url != urlcache){//URL二重判定回避
+          if (event.url != urlcache) {
+            //URL二重判定回避
             urlcache = event.url;
 
-            if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
-              if(Platform.OS==="android")navigate('howto');
+            if (
+              event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")
+            ) {
+              if (Platform.OS === "android") navigate("howto");
               webview?.current.goBack();
               //Actions.howto();
-            }
-            else if (event.url.includes("https://train.jr-shikoku.co.jp/train.html")) {
+            } else if (
+              event.url.includes("https://train.jr-shikoku.co.jp/train.html")
+            ) {
               //Actions.trainbase({info: event.url});
-              if(Platform.OS==="android")navigate('trainbase', {info: event.url});
+              if (Platform.OS === "android")
+                navigate("trainbase", { info: event.url });
               webview?.current.goBack();
             }
           }
-        }
-      } 
-      onMessage={(event)=>{}}
-      injectedJavaScript={injectJavascriptData}/>
-      <TouchableOpacity onPress={()=>navigate('trainMenu', {webview: webview})}  style={{position:"absolute",bottom:0,right:0,width:50,height:50,backgroundColor:"white",borderColor:"blue",borderStyle:"solid",borderWidth:1,borderRadius:50,alignContent:"center",alignSelf:"center",alignItems:"center",margin:10,display:mapSwitch == "true" ? "flex": "none"}}>
-        <View style={{flex:1}}/>
-        <Text style={{textAlign:"center",width:"auto",height:"auto",textAlignVertical:"center"}}>線</Text>
-        <View style={{flex:1}}/>
+        }}
+        onMessage={(event) => {}}
+        injectedJavaScript={injectJavascriptData}
+      />
+      <TouchableOpacity
+        onPress={() => navigate("trainMenu", { webview, stationData })}
+        style={{
+          position: "absolute",
+          top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+          right: 10,
+          width: 50,
+          height: 50,
+          backgroundColor: "#0099CC",
+          borderColor: "white",
+          borderStyle: "solid",
+          borderWidth: 1,
+          borderRadius: 50,
+          alignContent: "center",
+          alignSelf: "center",
+          alignItems: "center",
+          display: mapSwitch == "true" ? "flex" : "none",
+        }}
+      >
+        <View style={{ flex: 1 }} />
+        <Text
+          style={{
+            textAlign: "center",
+            width: "auto",
+            height: "auto",
+            textAlignVertical: "center",
+            fontWeight: "bold",
+            color: "white",
+          }}
+        >
+          三
+        </Text>
+        <View style={{ flex: 1 }} />
       </TouchableOpacity>
-      
     </View>
   );
 }

components/news.js

@@ -1,19 +1,44 @@
-import React, {  } 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 React 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";
 var Status = StatusbarDetect();
-export default function News(props){
-    const { navigation: { navigate } } = props;
-    return(
-        <View style={{height:"100%",backgroundColor:"#0099CC"}}>
-            <WebView useWebKit={true} source={{uri: 'https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/2022-6-11'}}  mixedContentMode={'compatibility'} javaScriptEnabled={true}/>
-            <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 News(props) {
+  const {
+    navigation: { navigate },
+  } = props;
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <WebView
+        useWebKit={true}
+        source={{
+          uri: "https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/2022-6-11",
+        }}
+        mixedContentMode={"compatibility"}
+        javaScriptEnabled={true}
+      />
+      <TouchableOpacity
+        style={{
+          padding: 10,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 10,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => {
+          AsyncStorage.setItem("status", "2022/06/11");
+          navigate("Apps");
+        }}
+      >
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          更新情報を閉じる
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+    </View>
+  );
 }

components/settings.js

@@ -1,66 +1,137 @@
-import React, { useState, useEffect } from 'react';
-import {View,Text,TouchableOpacity } from 'react-native';
-import * as Updates from 'expo-updates';
-import StatusbarDetect from '../StatusbarDetect';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import React, { useState, useEffect } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import * as Updates from "expo-updates";
+import StatusbarDetect from "../StatusbarDetect";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 var Status = StatusbarDetect();
-import { Switch } from 'react-native-elements';
+import { Switch } from "react-native-elements";
 
-export default function Setting(props){
-    const { navigation: { navigate } } = props;
-    const [iconSetting, setIconSetting] = useState(undefined)
-    const [mapSwitch, setMapSwitch] = useState(undefined)
-    useEffect(()=>{
-        AsyncStorage.getItem("iconSwitch").then( d =>{
-            setIconSetting(d)
-        })
-        AsyncStorage.getItem("mapSwitch").then( d =>{
-            setMapSwitch(d)
-        })
-    },[])
-    console.log(iconSetting);
-    return(
-        <View style={{height:"100%",backgroundColor:"#0099CC"}}>
-            <View style={{flex:1,backgroundColor:"white"}}>
-                <View style={{backgroundColor:"#0099CC"}}>
-                    <Text style={{fontSize:30,fontWeight:"bold",textAlign:"center",color:"white",padding:10}}>設定画面</Text>
-                </View>
-                <View style={{flex:1}} >
-                    <View style={{flexDirection:"row",padding:10}}>
-                        <Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>列車アイコンを表示する</Text>
-                        <View style={{flex:1}} />
-                        <Switch value={iconSetting == "true" ? true : false} color={iconSetting == "true" ? "red": null} onValueChange={(value)=>setIconSetting(value.toString())}/>
-                    </View>
-                    <View style={{flexDirection:"row",padding:10}}>
-                        <Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>channel: {Updates.channel}</Text>
-                        <View style={{flex:1}} />
-                    </View>
-                    <View style={{flexDirection:"row",padding:10}}>
-                        <Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>releaseChannel: {Updates.releaseChannel}</Text>
-                        <View style={{flex:1}} />
-                    </View>
-
-                    <View style={{flexDirection:"row",padding:10}}>
-                        <Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>マップを表示する(beta)</Text>
-                        <View style={{flex:1}} />
-                        <Switch value={mapSwitch == "true" ? true : false} color={mapSwitch == "true" ? "red": null} onValueChange={(value)=>setMapSwitch(value.toString())}/>
-                    </View>
-                    
-                </View>
-            </View>
-            <TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>{
-                Promise.all([
-                    AsyncStorage.setItem("iconSwitch",iconSetting.toString()),
-                    AsyncStorage.setItem("mapSwitch",mapSwitch.toString())
-                ])
-                .then(()=>{
-                    Updates.reloadAsync()
-                })
-                }}>
-              <View style={{flex:1}} />
-              <Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>設定を保存して再読み込み</Text>
-              <View style={{flex:1}} />
-            </TouchableOpacity>
+export default function Setting(props) {
+  const {
+    navigation: { navigate },
+  } = props;
+  const [iconSetting, setIconSetting] = useState(undefined);
+  const [mapSwitch, setMapSwitch] = useState(undefined);
+  useEffect(() => {
+    AsyncStorage.getItem("iconSwitch").then((d) => {
+      setIconSetting(d);
+    });
+    AsyncStorage.getItem("mapSwitch").then((d) => {
+      setMapSwitch(d);
+    });
+  }, []);
+  console.log(iconSetting);
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <View style={{ flex: 1, backgroundColor: "white" }}>
+        <View style={{ backgroundColor: "#0099CC" }}>
+          <Text
+            style={{
+              fontSize: 30,
+              fontWeight: "bold",
+              textAlign: "center",
+              color: "white",
+              padding: 10,
+            }}
+          >
+            設定画面
+          </Text>
         </View>
-    )
+        <View style={{ flex: 1 }}>
+          <View style={{ flexDirection: "row", padding: 10 }}>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              列車アイコンを表示する
+            </Text>
+            <View style={{ flex: 1 }} />
+            <Switch
+              value={iconSetting == "true" ? true : false}
+              color={iconSetting == "true" ? "red" : null}
+              onValueChange={(value) => setIconSetting(value.toString())}
+            />
+          </View>
+          <View style={{ flexDirection: "row", padding: 10 }}>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              内部バージョン: 4.3.1
+            </Text>
+            <View style={{ flex: 1 }} />
+          </View>
+          <View style={{ flexDirection: "row", padding: 10 }}>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              releaseChannel: {Updates.releaseChannel}
+            </Text>
+            <View style={{ flex: 1 }} />
+          </View>
+
+          <View style={{ flexDirection: "row", padding: 10 }}>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              マップを表示する(beta)
+            </Text>
+            <View style={{ flex: 1 }} />
+            <Switch
+              value={mapSwitch == "true" ? true : false}
+              color={mapSwitch == "true" ? "red" : null}
+              onValueChange={(value) => setMapSwitch(value.toString())}
+            />
+          </View>
+        </View>
+      </View>
+      <TouchableOpacity
+        style={{
+          padding: 10,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 10,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => {
+          Promise.all([
+            AsyncStorage.setItem("iconSwitch", iconSetting.toString()),
+            AsyncStorage.setItem("mapSwitch", mapSwitch.toString()),
+          ]).then(() => {
+            Updates.reloadAsync();
+          });
+        }}
+      >
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          設定を保存して再読み込み
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+    </View>
+  );
 }

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>
-  )
-}
+  );
+};