ファイルの分離

components/TrainMenu/MapsButton.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from "react";
+import { View, TouchableOpacity, TouchableOpacityProps } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+
+type Props = {
+  onPress: () => void;
+  top: number;
+  mapSwitch: "flex" | "none";
+};
+
+export const MapsButton: FC<Props> = ({ onPress, top, mapSwitch }) => {
+  const styles: TouchableOpacityProps["style"] = {
+    position: "absolute",
+    top,
+    left: 10,
+    width: 50,
+    height: 50,
+    backgroundColor: "#0099CC",
+    borderColor: "white",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderRadius: 50,
+    alignContent: "center",
+    alignSelf: "center",
+    alignItems: "center",
+    display: mapSwitch,
+  };
+  return (
+    <TouchableOpacity onPress={onPress} style={styles}>
+      <View style={{ flex: 1 }} />
+      <Ionicons name="close" color="white" size={30} />
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};