地図表示機能の改善

App.js

@@ -13,6 +13,7 @@ import menu from './menu';
 import News from './components/news.js';
 import TestArea from './TestArea.js';
 import Setting from './components/settings.js';
+import trainMenu from './components/trainMenu.js';
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
 if (Platform.OS === 'android') {
@@ -44,6 +45,7 @@ function top(){
       <Stack.Screen name="howto"   component={howto}  options={{ title: '使い方',gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}}/>
       <Stack.Screen name="test"   component={TestArea} options={{}}/>
       <Stack.Screen name="news" component={News} options={{gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}} />
+      <Stack.Screen name="trainMenu" component={trainMenu} options={{gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}} />
     </Stack.Navigator>
   )
 }

Apps.js

@@ -3,7 +3,6 @@ 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 MapView,{ Marker, Geojson, PROVIDER_GOOGLE } from 'react-native-maps';
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -14,9 +13,7 @@ export default function Apps (props) {
   const { navigation: { navigate } } = props;
   var urlcache="";
   const webview = useRef();
-  const mapRef = useRef();
   const [iconSetting, setIconSetting] = useState(undefined)
-  const [mapView, setMapView] = useState(false);
   const [mapSwitch, setMapSwitch] = useState(undefined);
 
 
@@ -731,32 +728,7 @@ const injectJavascriptData = bootData+trainIconMaker+textInsert;
   },[])
 
 
-  const [yosanData,setYosanData] = useState(undefined);
-  useEffect(()=>{
-    const HeaderConfig = {
-      headers:{
-        'referer':'https://train.jr-shikoku.co.jp/sp.html'
-      }
-    }/* 
-    fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan', HeaderConfig)
-      .then(response => response.json())
-      .then(setYosanData); */
   
-  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;
-    setYosanData(stationList);
-  })
-  },[]);
 
   return (
     <View style={{height:"100%",paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight: 0,}}>
@@ -791,44 +763,12 @@ const injectJavascriptData = bootData+trainIconMaker+textInsert;
       } 
       onMessage={(event)=>{}}
       injectedJavaScript={injectJavascriptData}/>
-      <TouchableOpacity onPress={()=>setMapView(true)}  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"}}>
+      <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}}/>
       </TouchableOpacity>
-      <View style={{position:"absolute",bottom:0,width:"100%",height:500,backgroundColor:"white",display:mapView ? "flex": "none"}}>
+      
-        {/*MoveDisplayStation('yosan_37_伊予北条') */}
-        <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,}}>
-                {mapView && yosanData && Object.keys(yosanData).map(d=>
-                  yosanData[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+"')");
-                        setMapView(false);
-                      }}>
-                      </Marker>
-                    )
-                  })
-                ) }
-        </MapView>
-        <Text onPress={()=>setMapView(false)} style={{fontSize:30}}>閉じる</Text>
-      </View>
     </View>
   );
 }

components/trainMenu.js

@@ -0,0 +1,82 @@
+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';
+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>
+    )
+}
+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>
+  )
+}

howto.js

@@ -1,16 +1,13 @@
 const WEBVIEW = "WEBVIEW";
 import React, { Component } from 'react';
-import { StatusBar,View} from 'react-native';
+import { StatusBar,View, TouchableOpacity, Text} from 'react-native';
 import {WebView} from 'react-native-webview';
-export default class howto extends Component {
+export default ({ navigation: { navigate } }) =>
-  render() {
+    <View style={{height:"100%",backgroundColor:"#0099CC"}}>
-    return (
-      <View style={{height:"100%"}}>
-        <View style={{alignItems:"center"}}>
-          <View style={{ width:60,height:8,marginTop:15,marginBottom:10, backgroundColor: "gray", padding: 0, borderRadius: 20, borderWidth: 1, borderColor: "gray", overflow: "hidden"}}/>
-        </View>
       <WebView useWebKit={true} source={{uri: 'https://train.jr-shikoku.co.jp/usage.htm'}}/>
+      <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>
-    );
-  }
-}