全列番検索機能の実装

components/CurrentTrainListView.js

@@ -0,0 +1,51 @@
+import React, { useRef } from "react";
+import { View, Text, TouchableOpacity, Linking } from "react-native";
+import MapView, { Marker } from "react-native-maps";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useCurrentTrain } from "../stateBox/useCurrentTrain";
+export default function CurrentTrainListView({ navigation: { navigate } }) {
+  const { currentTrain } = useCurrentTrain();
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      {currentTrain && currentTrain.map((d) => <Text>{d.num}</Text>)}
+      <TouchableOpacity
+        style={{
+          padding: 10,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 10,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => navigate("menu")}
+      >
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          閉じる
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+    </View>
+  );
+}
+const UsefulBox = (props) => {
+  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  return (
+    <TouchableOpacity
+      style={{
+        flex: flex,
+        backgroundColor: backgroundColor,
+        padding: 10,
+        alignItems: "center",
+        margin: 2,
+      }}
+      onPress={onPressButton}
+    >
+      <MaterialCommunityIcons name={icon} color="white" size={50} />
+      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
+        {children}
+      </Text>
+    </TouchableOpacity>
+  );
+};