Carouselと切り替えボタンを変更

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 (
+    <View style={{ flex: 1, paddingTop: 10 }}>
+      <Carousel
+        ref={carouselRef}
+        data={allStationData}
+        height={(((width / 100) * 80) / 20) * 9 + 10}
+        pagingEnabled={true}
+        snapEnabled={true}
+        loop={false}
+        width={width}
+        style={{ width: width, alignContent: "center" }}
+        mode="parallax"
+        modeConfig={{
+          parallaxScrollingScale: 1,
+          parallaxScrollingOffset: 100,
+          parallaxAdjacentItemScale: 0.8,
+        }}
+        onSnapToItem={setSelectedCurrentStation}
+        renderItem={({ item, index }) => {
+          return (
+            <View
+              style={{
+                backgroundColor: "#0000",
+                width,
+                flexDirection: "row",
+                marginLeft: 0,
+                marginRight: 0,
+              }}
+              key={item[0].StationNumber}
+            >
+              <View style={{ flex: 1 }} />
+              <Sign
+                currentStation={item}
+                isCurrentStation={item == currentStation}
+                oP={oPSign}
+                oLP={oLPSign}
+              />
+              <View style={{ flex: 1 }} />
+            </View>
+          );
+        }}
+      />
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "center",
+          alignContent: "center",
+          alignItems: "center",
+        }}
+      >
+        {originalStationList &&
+          allStationData.map((d, index) => {
+            const active = index == selectedCurrentStation;
+            const numberIndex = d[0].StationNumber;
+            if (dotButton) {
+              return (
+                <StationNumber
+                  onPress={() => setSelectedCurrentStation(index)}
+                  currentStation={d}
+                  active={active}
+                  key={numberIndex}
+                />
+              );
+            } else {
+              return (
+                <SimpleDot
+                  onPress={() => setSelectedCurrentStation(index)}
+                  active={active}
+                  key={numberIndex}
+                />
+              );
+            }
+          })}
+      </View>
+    </View>
+  );
+};

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 (
+    <View style={{ width: "100%", height: 40, flexDirection: "row" }}>
+      <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>
+  );
+};

menu.js

@@ -1,14 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
-import Carousel from "react-native-reanimated-carousel";
+import { Platform, View, ScrollView, useWindowDimensions } from "react-native";
-import {
-  Platform,
-  View,
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  LayoutAnimation,
-  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 (
     <View
       style={{
@@ -245,159 +198,20 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
           }}
           onPress={() => alert("地図をタップ")}
         />
-        <View style={{ width: "100%", height: 40, flexDirection: "row" }}>
+        <CarouselTypeChanger {...{ locationStatus, position, mapsRef }} />
-          <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>
         {allStationData.length != 0 && originalStationList.length != 0 && (
           <>
-            <View style={{ flex: 1, paddingTop: 10 }}>
+            <CarouselBox
-              <Carousel
+              {...{
-                ref={carouselRef}
+                originalStationList,
-                data={originalStationList && allStationData}
+                allStationData,
-                height={(((width / 100) * 80) / 20) * 9 + 10}
+                currentStation,
-                pagingEnabled={true}
+                setSelectedCurrentStation,
-                snapEnabled={true}
+                carouselRef,
-                loop={false}
+                selectedCurrentStation,
-                width={width}
+                navigate,
-                style={{ width: width, alignContent: "center" }}
+              }}
-                mode="parallax"
+            />
-                modeConfig={{
-                  parallaxScrollingScale: 1,
-                  parallaxScrollingOffset: 100,
-                  parallaxAdjacentItemScale: 0.8,
-                }}
-                onSnapToItem={setSelectedCurrentStation}
-                renderItem={({ item, index }) => {
-                  return (
-                    <View
-                      style={{
-                        backgroundColor: "#0000",
-                        width,
-                        flexDirection: "row",
-                        marginLeft: 0,
-                        marginRight: 0,
-                      }}
-                      key={item[0].StationNumber}
-                    >
-                      <View style={{ flex: 1 }} />
-                      <Sign
-                        currentStation={item}
-                        isCurrentStation={item == currentStation}
-                        oP={oPSign}
-                        oLP={oLPSign}
-                      />
-                      <View style={{ flex: 1 }} />
-                    </View>
-                  );
-                }}
-              />
-              <View
-                style={{
-                  flexDirection: "row",
-                  justifyContent: "center",
-                  alignContent: "center",
-                  alignItems: "center",
-                }}
-              >
-                {originalStationList &&
-                  allStationData.map((d, index) => {
-                    const active = index == selectedCurrentStation;
-                    const numberIndex = d[0].StationNumber;
-                    if (dotButton) {
-                      return (
-                        <StationNumber
-                          onPress={() => setSelectedCurrentStation(index)}
-                          currentStation={d}
-                          active={active}
-                          index={numberIndex}
-                        />
-                      );
-                    } else {
-                      return (
-                        <SimpleDot
-                          onPress={() => setSelectedCurrentStation(index)}
-                          active={active}
-                          index={numberIndex}
-                        />
-                      );
-                    }
-                  })}
-              </View>
-            </View>
             {allStationData[selectedCurrentStation] && (
               <LED_vision
                 station={allStationData[selectedCurrentStation]}

stateBox/useStationList.tsx

@@ -48,14 +48,13 @@ export const StationListProvider: FC<Props> = ({ 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 (