メニューの路線別リストアップ機能を追加

components/Menu/Carousel/CarouselBox.tsx

@@ -7,6 +7,7 @@ import {
   LayoutAnimation,
   TouchableOpacity,
   Text,
+  ScrollView,
 } from "react-native";
 import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
 import { SheetManager } from "react-native-actions-sheet";
@@ -19,11 +20,22 @@ export const CarouselBox = ({
   setListIndex,
   listIndex,
   navigate,
-  stationListMode
+  stationListMode,
 }) => {
   const carouselRef = useRef<ICarouselInstance>(null);
   const { height, width } = useWindowDimensions();
   const [dotButton, setDotButton] = useState(false);
+  const carouselBadgeScrollViewRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    if (!carouselBadgeScrollViewRef.current) return;
+    const scrollToIndex = listIndex * (width / listUpStation.length) + 10;
+    console.log("scrollToIndex", scrollToIndex);
+    carouselBadgeScrollViewRef.current.scrollTo({
+      x: scrollToIndex,
+      animated: true,
+    });
+  }, [listIndex, dotButton, width, carouselBadgeScrollViewRef]);
   const oPSign = () => {
     const payload = {
       currentStation: listUpStation[listIndex],
@@ -98,7 +110,9 @@ export const CarouselBox = ({
               }}
             >
               <Text style={{ color: "#0099CC", fontSize: 20 }}>
-                {stationListMode == "position" ? "現在地の近くに駅がありません。" : "お気に入りリストがありません。お気に入りの駅を追加しよう！"}
+                {stationListMode == "position"
+                  ? "現在地の近くに駅がありません。"
+                  : "お気に入りリストがありません。お気に入りの駅を追加しよう！"}
               </Text>
             </View>
           </TouchableOpacity>
@@ -131,12 +145,23 @@ export const CarouselBox = ({
         onSnapToItem={setListIndex}
         renderItem={RenderItem}
       />
-      <View
+      <ScrollView
-        style={{
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{
           flexDirection: "row",
           justifyContent: "center",
           alignContent: "center",
           alignItems: "center",
+          paddingVertical: 2,
+          paddingHorizontal: 10,
+          minWidth: width,
+        }}
+        ref={(scrollViewRef) => {
+          // ScrollViewのrefを保存
+          if (scrollViewRef) {
+            carouselBadgeScrollViewRef.current = scrollViewRef;
+          }
         }}
       >
         {originalStationList &&
@@ -158,7 +183,7 @@ export const CarouselBox = ({
               />
             );
           })}
-      </View>
+      </ScrollView>
     </View>
   );
 };

components/Menu/Carousel/CarouselTypeChanger.tsx

@@ -23,9 +23,10 @@ export const CarouselTypeChanger = ({
   setSelectedCurrentStation,
   mapMode,
   setMapMode,
+  isSearchMode,
+  setisSearchMode,
 }) => {
   const tabBarHeight = useBottomTabBarHeight();
-  const [isSearchMode, setisSearchMode] = React.useState(false);
   const { height, width } = useWindowDimensions();
   const returnToDefaultMode = () => {
     LayoutAnimation.configureNext({

components/Menu/RailScope/SearchUnitBox.tsx

@@ -10,6 +10,8 @@ import {
 } from "react-native";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import { useWindowDimensions } from "react-native";
+import lineColorList from "@/assets/originData/lineColorList";
+import { lineList_LineWebID, stationIDPair } from "@/lib/getStationList";
 export const SearchUnitBox = ({ isSearchMode, setisSearchMode }) => {
   const { height, width } = useWindowDimensions();
   return (
@@ -17,46 +19,81 @@ export const SearchUnitBox = ({ isSearchMode, setisSearchMode }) => {
       <TouchableOpacity
         style={{
           position: "absolute",
-        bottom: isSearchMode ? 0 : 60,
+          bottom: !!isSearchMode ? 0 : 60,
           right: 0,
-        padding: isSearchMode ? 5 : 10,
+          padding: !!isSearchMode ? 5 : 10,
-        margin: isSearchMode ? 0 : 10,
+          margin: !!isSearchMode ? 0 : 10,
           backgroundColor: "#0099CC",
-        borderRadius: isSearchMode ? 5 : 50,
+          borderRadius: !!isSearchMode ? 5 : 50,
-        width: isSearchMode ? width : 50,
+          width: !!isSearchMode ? width : 50,
           zIndex: 1000,
         }}
-      disabled={isSearchMode}
+        disabled={!!isSearchMode}
         onPress={() => {
           LayoutAnimation.configureNext({
-          duration: 200,
+            duration: 100,
             update: { type: "easeInEaseOut", springDamping: 0.6 },
           });
           setisSearchMode(true);
         }}
       >
         {!isSearchMode && <Ionicons name="search" size={30} color="white" />}
-      {isSearchMode && (
+        {!!isSearchMode && (
           <View style={{ backgroundColor: "#0099CC" }}>
-            <Text
+            
-              style={{ color: "white" }}
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
-              onPress={() => {
+              <TouchableOpacity onPress={() => {
                 LayoutAnimation.configureNext({
-                  duration: 200,
+                  duration: 100,
                   update: { type: "easeInEaseOut", springDamping: 0.6 },
                 });
                 setisSearchMode(false);
+              }}>
+                <Ionicons
+                  name="arrow-back"
+                  size={20}
+                  color="white"
+                  style={{ marginRight: 10 }}
+                />
+              </TouchableOpacity>
+              {Object.keys(lineList_LineWebID).map((d) => (
+                <TouchableOpacity
+                  style={{
+                    flex: 1,
+                    backgroundColor: lineColorList[stationIDPair[lineList_LineWebID[d]]],
+                    padding: 5,
+                    marginHorizontal: 2,
+                    borderRadius: 10,
+                    borderColor: "white",
+                    borderWidth: 1,
+                    borderStyle: "solid",
+                    alignItems: "center",
+                    opacity: isSearchMode == stationIDPair[lineList_LineWebID[d]] ? 1 : !isSearchMode ? 1 : 0.5,
+                    zIndex: 10,
                   }}
+                  onPress={() => {
+                    const id = stationIDPair[lineList_LineWebID[d]];
+                    const s = isSearchMode == id ? undefined : id;
+                    if (!s) return;
+                    setisSearchMode(s);
+                  }}
+                  key={stationIDPair[lineList_LineWebID[d]]}
                 >
-              あああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
+                  <Text
+                    style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
+                  >
+                    {stationIDPair[lineList_LineWebID[d]]}
                   </Text>
-            <View
+                </TouchableOpacity>
+              ))}
+              {/* <View
               style={{
                 backgroundColor: "white",
                 borderRadius: 25,
                 height: 30,
                 paddingRight: 10,
                 paddingLeft: 10,
+                flex: 1,
               }}
             >
               <TextInput
@@ -67,6 +104,7 @@ export const SearchUnitBox = ({ isSearchMode, setisSearchMode }) => {
                 //value={input}
                 style={{ flex: 1 }}
               />
+            </View> */}
             </View>
           </View>
         )}

menu.js

@@ -19,7 +19,7 @@ import LED_vision from "./components/発車時刻表/LED_vidion";
 import { TitleBar } from "./components/Menu/TitleBar";
 import { FixedContentBottom } from "./components/Menu/FixedContentBottom";
 
-import { lineList } from "./lib/getStationList";
+import { lineList, stationIDPair } from "./lib/getStationList";
 import { useFavoriteStation } from "./stateBox/useFavoriteStation";
 import { useNavigation } from "@react-navigation/native";
 import { useStationList } from "./stateBox/useStationList";
@@ -32,6 +32,7 @@ import { CarouselBox } from "./components/Menu/Carousel/CarouselBox";
 import { CarouselTypeChanger } from "./components/Menu/Carousel/CarouselTypeChanger";
 import { useUserPosition } from "./stateBox/useUserPosition";
 import { AS } from "./storageControl";
+import { lineList_LineWebID } from "./lib/getStationList";
 import { Ionicons } from "@expo/vector-icons";
 import { SearchUnitBox } from "./components/Menu/RailScope/SearchUnitBox";
 configureReanimatedLogger({
@@ -171,13 +172,26 @@ export default function Menu(props) {
   const [listIndex, setListIndex] = useState(0);
 
   const [listUpStation, setListUpStation] = useState([]);
+  const [isSearchMode, setisSearchMode] = useState(false);
   useEffect(() => {
-    if (stationListMode == "position") {
+    if (!!isSearchMode) {
+      const returnData = [];
+      Object.keys(lineList_LineWebID).forEach((d, indexBase) => {
+        originalStationList[d].forEach((D, index) => {
+          if (isSearchMode && isSearchMode != stationIDPair[lineList_LineWebID[d]]) return;
+          const latlng = [D.lat, D.lng];
+          if (latlng.length == 0) return null;
+          returnData.push([D]);
+        });
+      });
+      setListUpStation(returnData);
+    }
+    else if (stationListMode == "position") {
       setListUpStation(nearPositionStation.filter((d) => d != undefined));
     } else {
       setListUpStation(favoriteStation.filter((d) => d != undefined));
     }
-  }, [nearPositionStation, favoriteStation, stationListMode]);
+  }, [nearPositionStation, favoriteStation, stationListMode, isSearchMode]);
   useEffect(() => {
     if (listUpStation.length == 0) {
       setListIndex(0);
@@ -325,12 +339,15 @@ export default function Menu(props) {
             {...{
               locationStatus,
               position,
-              mapsRef,scrollRef,
+              mapsRef,
+              scrollRef,
               stationListMode,
               setStationListMode,
               setSelectedCurrentStation: setListIndex,
               mapMode,
               setMapMode,
+              isSearchMode,
+              setisSearchMode,
             }}
           />
         )}
@@ -373,6 +390,8 @@ export default function Menu(props) {
             setSelectedCurrentStation: setListIndex,
             mapMode,
             setMapMode,
+            isSearchMode,
+            setisSearchMode,
           }}
         />
       )}