ListViewを修正

components/StationDiagram/ListView.tsx

@@ -1,18 +1,43 @@
 import { FC } from "react";
 import { ListViewItem } from "@/components/StationDiagram/ListViewItem";
+import { View, Text, ScrollView } from "react-native";
 
-export const ListView: FC<{ data: {
+export const ListView: FC<{
+  data: {
     trainNumber: string;
     array: string;
     name: string;
     type: string;
     time: string;
-  }[]; }> = ({ data }) => {
+  }[];
+}> = ({ data }) => {
+  const groupedData = {};
+  const groupKeys = [];
+  data.forEach((item) => {
+    const hour = item.time.split(":")[0];
+    if (!groupedData[hour]) {
+      groupedData[hour] = [];
+      groupKeys.push(hour);
+    }
+    groupedData[hour].push(item);
+  });
   return (
-    <>
-      {data.map((d, i) => (
-        <ListViewItem key={d.trainNumber + i} d={d} />
-      ))}
-    </>
+    <ScrollView
+      style={{ backgroundColor: "white" }}
+      stickyHeaderIndices={
+        groupKeys.at(0) ? groupKeys.map((_, i) => i * 2) : []
+      }
+    >
+      {groupKeys.map((hour) => [
+        <View style={{ backgroundColor: "white", padding: 5, borderBottomWidth: 0.5, borderTopWidth: 0.5, borderBottomColor: "#ccc" }} key={hour}>
+          <Text style={{ fontSize: 15 }}>{hour}時台</Text>
+        </View>,
+        <View>
+          {groupedData[hour].map((d, i) => (
+            <ListViewItem key={d.trainNumber + i} d={d} />
+          ))}
+        </View>,
+      ])}
+    </ScrollView>
   );
 };

components/StationDiagram/StationDiagramView.tsx

@@ -100,9 +100,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
       >
         {currentStation[0].Station_JP}駅 時刻表
       </Text>
-      <ScrollView style={{ backgroundColor: "white" }}>
         <ListView data={currentStationDiagram} />
-      </ScrollView>
       {/* <Text
         style={{
           backgroundColor: "white",