現在地ベースのボタンとか追加

components/atom/UsefulBox.js

@@ -1,7 +1,7 @@
 import { TouchableOpacity, Text } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 export const UsefulBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  const { icon, backgroundColor, flex, onPressButton, children, disable = false } = props; 
   return (
     <TouchableOpacity
       style={{
@@ -11,6 +11,7 @@ export const UsefulBox = (props) => {
         alignItems: "center",
         margin: 2,
       }}
+      disabled={disable}
       onPress={onPressButton}
     >
       <MaterialCommunityIcons name={icon} color="white" size={50} />

components/発車時刻表/LED_vidion.js

@@ -10,8 +10,7 @@ import { Footer } from "./LED_Vision_Component/Footer";
 import { Header } from "./LED_Vision_Component/Header";
 import { Description } from "./LED_inside_Component/Description";
 import { EachData } from "./EachData";
-
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
-
 
 /**
  *
@@ -43,13 +42,8 @@ import { EachData } from "./EachData";
  * 9062D 四国まんなか千年ものがたり(臨時？)
  */
 export default function LED_vision(props) {
-  const {
+  const { station, getCurrentTrain, navigate, openStationACFromEachTrainInfo } =
-    station,
+    props;
-    trainDiagram,
-    getCurrentTrain,
-    navigate,
-    openStationACFromEachTrainInfo,
-  } = props;
   const { currentTrain } = useCurrentTrain();
   const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
   const [finalSwitch, setFinalSwitch] = useState(false);
@@ -57,6 +51,7 @@ export default function LED_vision(props) {
   const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
   const [isInfoArea, setIsInfoArea] = useState(false);
   const { areaInfo, areaStationID } = useAreaInfo();
+  const { allTrainDiagram: trainDiagram } = useAllTrainDiagram();
 
   useEffect(() => {
     AS.getItem("LEDSettings/trainIDSwitch").then((data) => {
@@ -107,27 +102,29 @@ export default function LED_vision(props) {
   }, [trainTimeAndNumber, currentTrain, finalSwitch]);
 
   const getTime = (stationDiagram, station) => {
-    const returnData = Object.keys(stationDiagram).map((trainNum) => {
+    const returnData = Object.keys(stationDiagram)
-      let trainData = {};
+      .map((trainNum) => {
-      stationDiagram[trainNum].split("#").forEach((data) => {
+        let trainData = {};
-        if (data.match("着")) {
+        stationDiagram[trainNum].split("#").forEach((data) => {
-          trainData.lastStation = data.split(",着,")[0];
+          if (data.match("着")) {
-        }
+            trainData.lastStation = data.split(",着,")[0];
-        if (data.split(",")[0] === station.Station_JP) {
-          if (data.match(",発,")) {
-            trainData.time = data.split(",発,")[1];
-          } else if(data.match(",着,")){ 
-            trainData.time = data.split(",着,")[1];
-            trainData.lastStation = "当駅止";
           }
-        }
+          if (data.split(",")[0] === station.Station_JP) {
-      });
+            if (data.match(",発,")) {
-      return {
+              trainData.time = data.split(",発,")[1];
-        train: trainNum,
+            } else if (data.match(",着,")) {
-        time: trainData.time,
+              trainData.time = data.split(",着,")[1];
-        lastStation: trainData.lastStation,
+              trainData.lastStation = "当駅止";
-      };
+            }
-    }).filter((d) => d.time);
+          }
+        });
+        return {
+          train: trainNum,
+          time: trainData.time,
+          lastStation: trainData.lastStation,
+        };
+      })
+      .filter((d) => d.time);
     return returnData.sort((a, b) => {
       switch (true) {
         case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]):

menu.js

@@ -15,12 +15,10 @@ import * as Location from "expo-location";
 import {
   configureReanimatedLogger,
   ReanimatedLogLevel,
-} from 'react-native-reanimated';
+} from "react-native-reanimated";
 import StatusbarDetect from "./StatusbarDetect";
-import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import { Ionicons } from "@expo/vector-icons";
 import LottieView from "lottie-react-native";
-import { parseAllTrainDiagram } from "./lib/parseAllTrainDiagram";
 
 import LED_vision from "./components/発車時刻表/LED_vidion";
 import Sign from "./components/駅名表/Sign";
@@ -52,7 +50,7 @@ export default function Menu({ getCurrentTrain }) {
   const { originalStationList } = useStationList();
   const { height, width } = useWindowDimensions();
   const scrollRef = useRef(null);
-  const [mapsOpacity, setMapsOpacity] = useState(1);
+  const [mapsOpacity, setMapsOpacity] = useState(false);
   const mapsRef = useRef(null);
   const mapsSizeOffset =
     (height / 100) * 60 -
@@ -81,13 +79,17 @@ export default function Menu({ getCurrentTrain }) {
       );
     });
   }, []);
-
+  const [position, setPosition] = useState(undefined);
   const getCurrentPosition = () => {
     if (!locationStatus) return () => {};
-    Location.getCurrentPositionAsync({}).then((location) =>
+    Location.getCurrentPositionAsync({}).then((location) => {
-      makeCurrentStation(location)
+      setPosition(location);
-    );
+    });
   };
+  useEffect(() => {
+    if (!position) return () => {};
+    makeCurrentStation(position);
+  }, [position]);
   const makeCurrentStation = (location) => {
     if (!originalStationList) return () => {};
     const findStationEachLine = (selectLine) => {
@@ -157,8 +159,6 @@ export default function Menu({ getCurrentTrain }) {
   }, [selectedCurrentStation]);
 
   //全列車ダイヤリストを作成するuseEffect
-  const { allTrainDiagram: trainDiagram } = useAllTrainDiagram();
-
   const oPSign = () => {
     const payload = {
       currentStation:
@@ -177,22 +177,20 @@ export default function Menu({ getCurrentTrain }) {
 
   useEffect(() => {
     console.log(selectedCurrentStation);
-    if(allStationData.length == 0) return;
+    if (allStationData.length == 0) return;
-    const currentStationData =
+    if (allStationData[selectedCurrentStation] == undefined) return;
+    const { lat, lng } =
       originalStationList &&
       allStationData[selectedCurrentStation] &&
       allStationData[selectedCurrentStation][0];
-      console.log(currentStationData);
+    const mapRegion = {
-      const {lat, lng} = currentStationData;
+      latitude: lat,
-      const mapRegion = {
+      longitude: lng,
-        latitude: lat,
+      latitudeDelta: 0.05,
-        longitude: lng,
+      longitudeDelta: 0.05,
-        latitudeDelta: 0.05,
+    };
-        longitudeDelta: 0.05,
+    mapsRef.current.animateToRegion(mapRegion, 1000);
-      };
+  }, [selectedCurrentStation, currentStation, allStationData, mapsRef]);
-      mapsRef.current.animateToRegion(mapRegion, 1000);
-    
-  }, [selectedCurrentStation, currentStation, allStationData,mapsRef]);
 
   useEffect(() => {
     AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
@@ -228,10 +226,8 @@ export default function Menu({ getCurrentTrain }) {
         decelerationRate={"normal"}
         onScroll={(d) => {
           console.log(Object.keys(scrollRef.current));
-          const scrollY = d.nativeEvent.contentOffset.y;
+          const scrollY = d.nativeEvent.contentOffset.y + 100;
-          if (scrollY < mapsSizeOffset) {
+          setMapsOpacity(scrollY < mapsSizeOffset);
-            setMapsOpacity(scrollY / mapsSizeOffset);
-          }
         }}
         snapToOffsets={[mapsSizeOffset]}
       >
@@ -244,7 +240,7 @@ export default function Menu({ getCurrentTrain }) {
               position: "absolute",
               height:
                 (height / 100) * 60 + (((width / 100) * 80) / 20) * 9 + 60,
-              opacity: 1 - mapsOpacity,
+              opacity: mapsOpacity ? 1 : 0,
             }}
             showsUserLocation={true}
             loadingEnabled={true}
@@ -263,8 +259,103 @@ export default function Menu({ getCurrentTrain }) {
             }}
           ></MapView>
         </View>
-        <TopMenuButton />
+        <TopMenuButton show={mapsOpacity} />
-        <View style={{ height: mapsSizeOffset }} />
+        <View style={{ height: mapsSizeOffset, position: "relative" }}>
+          <View
+            style={{
+              width: "100%",
+              position: "absolute",
+              bottom: 0,
+              flexDirection: "row",
+              display: mapsOpacity ? "flex" : "none",
+            }}
+          >
+            <TouchableOpacity
+              style={{
+                flex: 1,
+                backgroundColor: "#0099CC",
+                padding: 5,
+                alignItems: "center",
+                flexDirection: "row",
+                marginHorizontal: 5,
+                borderRadius: 30,
+              }}
+              disabled={!locationStatus}
+              onPress={()=>{
+                if(!position) return;
+                const { latitude, longitude } = position.coords;
+                mapsRef.current.animateToRegion(
+                  {
+                    latitude,
+                    longitude,
+                    latitudeDelta: 0.05,
+                    longitudeDelta: 0.05,
+                  },
+                  1000
+                );
+              }}
+            >
+              <Ionicons
+                name="locate-outline"
+                size={14}
+                color="white"
+                style={{ margin: 5 }}
+              />
+              <Text
+                style={{
+                  color: "white",
+                  fontSize: 14,
+                  fontWeight: "bold",
+                  flex: 1,
+                  textAlign: "center",
+                }}
+              >
+                現在地基準
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{
+                flex: 1,
+                backgroundColor: "#0099CC",
+                padding: 5,
+                alignItems: "center",
+                flexDirection: "row",
+
+                marginHorizontal: 5,
+                borderRadius: 30,
+              }}
+              onPress={() => {
+                // お気に入りリスト更新
+              }}
+            >
+              <Ionicons
+                name="star"
+                size={14}
+                color="white"
+                style={{ margin: 5 }}
+              />
+              <Text
+                style={{
+                  color: "white",
+                  fontSize: 14,
+                  fontWeight: "bold",
+                  flex: 1,
+                  textAlign: "center",
+                }}
+              >
+                お気に入りリスト
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <View
+            style={{
+              height: 0,
+              backgroundColor: "white",
+              position: "absolute",
+              top: mapsSizeOffset,
+            }}
+          />
+        </View>
         <></>
         {originalStationList.length != 0 && allStationData.length != 0 && (
           <View style={{ flex: 1, paddingTop: 10 }}>
@@ -346,10 +437,7 @@ export default function Menu({ getCurrentTrain }) {
           originalStationList.length != 0 &&
           allStationData[selectedCurrentStation] && (
             <LED_vision
-              station={
+              station={allStationData[selectedCurrentStation]}
-                originalStationList && allStationData[selectedCurrentStation]
-              }
-              trainDiagram={trainDiagram}
               getCurrentTrain={getCurrentTrain}
               navigate={navigate}
               openStationACFromEachTrainInfo={() => {}}
@@ -362,7 +450,7 @@ export default function Menu({ getCurrentTrain }) {
   );
 }
 
-const TopMenuButton = () => {
+const TopMenuButton = ({ show }) => {
   const buttonList = [
     {
       backgroundColor: "#F89038",
@@ -388,12 +476,13 @@ const TopMenuButton = () => {
     },
   ];
   return (
-    <View style={{ flexDirection: "row" }}>
+    <View style={{ flexDirection: "row", opacity: !show ? 1 : 0 }}>
       {buttonList.map((d, index) => (
         <UsefulBox
           backgroundColor={d.backgroundColor}
           icon={d.icon}
           flex={1}
+          disable={show}
           onPressButton={d.onPress}
           key={index + d.icon}
         >