地図の設置テスト

Apps.js

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
-import {View, Platform,ToastAndroid} from 'react-native';
+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(); */
@@ -13,7 +14,10 @@ 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);
 
 
   const bootData = `
@@ -713,8 +717,47 @@ const injectJavascriptData = bootData+trainIconMaker+textInsert;
       
        
     }).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()))
+
   },[])
 
+
+  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,}}>
       {/* {Status} */}
@@ -748,6 +791,44 @@ 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"}}>
+        <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>
   );
 }

app.json

@@ -7,7 +7,7 @@
       "ios",
       "android"
     ],
-    "version": "4.2",
+    "version": "4.3",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "splash": {
@@ -22,15 +22,23 @@
       "**/*"
     ],
     "ios": {
-      "buildNumber": "20",
+      "buildNumber": "21",
       "supportsTablet": true,
-      "bundleIdentifier": "jrshikokuinfo.xprocess.hrkn"
+      "bundleIdentifier": "jrshikokuinfo.xprocess.hrkn",
+      "config": {
+        "googleMapsApiKey": "AIzaSyAVGDTjBkR_0wkQiNkoo5WDLhqXCjrjk8Y"
+      }
     },
     "android": {
       "package": "jrshikokuinfo.xprocess.hrkn",
-      "versionCode": 14,
+      "versionCode": 15,
       "permissions": ["ACCESS_FINE_LOCATION"],
-      "googleServicesFile": "./google-services.json"
+      "googleServicesFile": "./google-services.json",
+      "config": {
+        "googleMaps": {
+          "apiKey": "AIzaSyAmFb-Yj033bXZWlSzNrfq_0jc1PgRrWcE"
+        }
+      }
     }
   }
 }

components/settings.js

@@ -9,10 +9,14 @@ 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(
@@ -35,11 +39,21 @@ export default function Setting(props){
                         <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={()=>{
-                AsyncStorage.setItem("iconSwitch",iconSetting.toString()).then(()=>{
+                Promise.all([
+                    AsyncStorage.setItem("iconSwitch",iconSetting.toString()),
+                    AsyncStorage.setItem("mapSwitch",mapSwitch.toString())
+                ])
+                .then(()=>{
                     Updates.reloadAsync()
                 })
                 }}>

eas.json

@@ -10,6 +10,7 @@
     "preview": {
       "distribution": "internal"
     },
+    "mapsbuild":{},
     "production": {}
   },
   "submit": {

package.json

@@ -29,6 +29,7 @@
     "react-native-auto-height-image": "^3.2.4",
     "react-native-elements": "^3.4.2",
     "react-native-gesture-handler": "~2.2.1",
+    "react-native-maps": "0.30.2",
     "react-native-reanimated": "~2.8.0",
     "react-native-remote-svg": "^2.0.6",
     "react-native-responsive-screen": "^1.4.2",

yarn.lock

@@ -2977,6 +2977,11 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/geojson@^7946.0.7":
+  version "7946.0.8"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.8.tgz#30744afdb385e2945e22f3b033f897f76b1f12ca"
+  integrity sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -8618,6 +8623,14 @@ react-native-iphone-x-helper@^1.3.0:
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
   integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
 
+react-native-maps@0.30.2:
+  version "0.30.2"
+  resolved "https://registry.yarnpkg.com/react-native-maps/-/react-native-maps-0.30.2.tgz#2f1cf4ab79892a43060774bda8786ce6ab8e3616"
+  integrity sha512-WVv5e7aWdnNJugqNSG/87U+12Pg4RFWU7x/UigTPG1FEUZx2TbYKChL6xZCMGPOv5m5b4Z7bMeKJnZosg+yPyQ==
+  dependencies:
+    "@types/geojson" "^7946.0.7"
+    deprecated-react-native-prop-types "^2.3.0"
+
 react-native-ratings@8.0.4:
   version "8.0.4"
   resolved "https://registry.yarnpkg.com/react-native-ratings/-/react-native-ratings-8.0.4.tgz#efd5ebad8acc08bf98d34d39b18fb7a6813ef991"