diff --git a/components/Menu/Carousel/CarouselBox.tsx b/components/Menu/Carousel/CarouselBox.tsx
new file mode 100644
index 0000000..6f595a6
--- /dev/null
+++ b/components/Menu/Carousel/CarouselBox.tsx
@@ -0,0 +1,125 @@
+import Sign from "@/components/駅名表/Sign";
+import React, { useEffect, useState } from "react";
+import { AS } from "@/storageControl";
+import { useWindowDimensions, View, LayoutAnimation } from "react-native";
+import Carousel from "react-native-reanimated-carousel";
+import { SheetManager } from "react-native-actions-sheet";
+import { StationNumber } from "../StationPagination";
+import { SimpleDot } from "../SimpleDot";
+export const CarouselBox = ({
+ originalStationList,
+ allStationData,
+ currentStation,
+ setSelectedCurrentStation,
+ carouselRef,
+ selectedCurrentStation,
+ navigate,
+}) => {
+ const { height, width } = useWindowDimensions();
+ const [dotButton, setDotButton] = useState(false);
+ const oPSign = () => {
+ const payload = {
+ currentStation: allStationData[selectedCurrentStation],
+ navigate,
+ goTo: "menu",
+ //@ts-ignore
+ useShow: () => SheetManager.show("StationDetailView", { payload }),
+ onExit: () => SheetManager.hide("StationDetailView"),
+ };
+ //@ts-ignore
+ SheetManager.show("StationDetailView", { payload });
+ };
+ const oLPSign = () => {
+ LayoutAnimation.configureNext({
+ duration: 600,
+ update: { type: "spring", springDamping: 0.5 },
+ });
+ AS.setItem(
+ "CarouselSettings/activeDotSettings",
+ !dotButton ? "true" : "false"
+ );
+ setDotButton(!dotButton);
+ };
+
+ useEffect(() => {
+ AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
+ setDotButton(data === "true");
+ });
+ }, []);
+ return (
+
+ {
+ return (
+
+
+
+
+
+ );
+ }}
+ />
+
+ {originalStationList &&
+ allStationData.map((d, index) => {
+ const active = index == selectedCurrentStation;
+ const numberIndex = d[0].StationNumber;
+ if (dotButton) {
+ return (
+ setSelectedCurrentStation(index)}
+ currentStation={d}
+ active={active}
+ key={numberIndex}
+ />
+ );
+ } else {
+ return (
+ setSelectedCurrentStation(index)}
+ active={active}
+ key={numberIndex}
+ />
+ );
+ }
+ })}
+
+
+ );
+};
diff --git a/components/Menu/Carousel/CarouselTypeChanger.tsx b/components/Menu/Carousel/CarouselTypeChanger.tsx
new file mode 100644
index 0000000..776f4d9
--- /dev/null
+++ b/components/Menu/Carousel/CarouselTypeChanger.tsx
@@ -0,0 +1,80 @@
+import React, { useRef } from "react";
+import { View, TouchableOpacity, Text } from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+
+export const CarouselTypeChanger = ({ locationStatus, position, mapsRef }) => {
+ return (
+
+ {
+ if (!position) return;
+ const { latitude, longitude } = position.coords;
+ mapsRef.current.animateToRegion(
+ {
+ latitude,
+ longitude,
+ latitudeDelta: 0.05,
+ longitudeDelta: 0.05,
+ },
+ 1000
+ );
+ }}
+ >
+
+
+ 現在地基準
+
+
+ {
+ // お気に入りリスト更新
+ }}
+ >
+
+
+ お気に入りリスト
+
+
+
+ );
+};
diff --git a/menu.js b/menu.js
index 5cb79d4..48f86a9 100644
--- a/menu.js
+++ b/menu.js
@@ -1,14 +1,5 @@
import React, { useRef, useState, useEffect } from "react";
-import Carousel from "react-native-reanimated-carousel";
-import {
- Platform,
- View,
- ScrollView,
- Text,
- TouchableOpacity,
- LayoutAnimation,
- useWindowDimensions,
-} from "react-native";
+import { Platform, View, ScrollView, useWindowDimensions } from "react-native";
import Constants from "expo-constants";
import * as Location from "expo-location";
import {
@@ -16,27 +7,23 @@ import {
ReanimatedLogLevel,
} from "react-native-reanimated";
import StatusbarDetect from "./StatusbarDetect";
-import { Ionicons } from "@expo/vector-icons";
import LED_vision from "./components/発車時刻表/LED_vidion";
-import Sign from "./components/駅名表/Sign";
import { TitleBar } from "./components/Menu/TitleBar";
import { FixedContentBottom } from "./components/Menu/FixedContentBottom";
import { lineList } from "./lib/getStationList";
import useInterval from "./lib/useInterval";
import { useFavoriteStation } from "./stateBox/useFavoriteStation";
-import { SheetManager } from "react-native-actions-sheet";
import { useNavigation } from "@react-navigation/native";
import { useStationList } from "./stateBox/useStationList";
-import { StationNumber } from "./components/Menu/StationPagination";
-import { AS } from "./storageControl";
-import { SimpleDot } from "./components/Menu/SimpleDot";
import { TopMenuButton } from "@/components/Menu/TopMenuButton";
import { JRSTraInfoBox } from "@/components/Menu/JRSTraInfoBox";
import MapView from "react-native-maps";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
+import { CarouselBox } from "./components/Menu/Carousel/CarouselBox";
+import { CarouselTypeChanger } from "./components/Menu/Carousel/CarouselTypeChanger";
configureReanimatedLogger({
level: ReanimatedLogLevel.error, // Set the log level to error
strict: true, // Reanimated runs in strict mode by default
@@ -157,23 +144,6 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
});
}, [selectedCurrentStation]);
- //全列車ダイヤリストを作成するuseEffect
- const oPSign = () => {
- const payload = {
- currentStation:
- originalStationList &&
- allStationData.length != 0 &&
- allStationData[selectedCurrentStation],
- navigate: navigate,
- goTo: "menu",
- useShow: () => SheetManager.show("StationDetailView", { payload }),
- onExit: () => SheetManager.hide("StationDetailView"),
- };
- SheetManager.show("StationDetailView", { payload });
- };
-
- const [dotButton, setDotButton] = useState(false);
-
useEffect(() => {
console.log(selectedCurrentStation);
if (allStationData.length == 0) return;
@@ -190,23 +160,6 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
};
mapsRef.current.animateToRegion(mapRegion, 1000);
}, [selectedCurrentStation, currentStation, allStationData, mapsRef]);
-
- useEffect(() => {
- AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
- setDotButton(data === "true");
- });
- }, []);
- const oLPSign = () => {
- LayoutAnimation.configureNext({
- duration: 600,
- update: { type: "spring", springDamping: 0.5 },
- });
- AS.setItem(
- "CarouselSettings/activeDotSettings",
- !dotButton ? "true" : "false"
- );
- setDotButton(!dotButton);
- };
return (
alert("地図をタップ")}
/>
-
- {
- if (!position) return;
- const { latitude, longitude } = position.coords;
- mapsRef.current.animateToRegion(
- {
- latitude,
- longitude,
- latitudeDelta: 0.05,
- longitudeDelta: 0.05,
- },
- 1000
- );
- }}
- >
-
-
- 現在地基準
-
-
- {
- // お気に入りリスト更新
- }}
- >
-
-
- お気に入りリスト
-
-
-
+
{allStationData.length != 0 && originalStationList.length != 0 && (
<>
-
- {
- return (
-
-
-
-
-
- );
- }}
- />
-
- {originalStationList &&
- allStationData.map((d, index) => {
- const active = index == selectedCurrentStation;
- const numberIndex = d[0].StationNumber;
- if (dotButton) {
- return (
- setSelectedCurrentStation(index)}
- currentStation={d}
- active={active}
- index={numberIndex}
- />
- );
- } else {
- return (
- setSelectedCurrentStation(index)}
- active={active}
- index={numberIndex}
- />
- );
- }
- })}
-
-
+
{allStationData[selectedCurrentStation] && (
= ({ children }) => {
useEffect(()=>{
if(originalStationList.length === 0) return;
const stationList =
- originalStationList &&
lineList.map((d) =>
originalStationList[d].map((a) => ({
StationNumber: a.StationNumber,
StationName: a.Station_JP,
}))
);
- setStationList(stationList)
+ setStationList(stationList);
},[originalStationList])
return (