LEDの処理大整理

components/CurrentTrainListView.js

@@ -1,53 +1,15 @@
-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 React from "react";
+import { View, Text } from "react-native";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
+import { BigButton } from "./atom/BigButton";
 export default function CurrentTrainListView() {
   const { navigate } = useNavigation();
   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>
+      <BigButton onPress={() => navigate("menu")} string="閉じる" />
     </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>
-  );
-};