Appsの内容分離

components/Apps/LandscapeBackButton.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from "react";
+import {
+  View,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  TextStyle,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import Constants from "expo-constants";
+import { useTrainMenu } from "../../stateBox/useTrainMenu";
+export const LandscapeBackButton: FC<{
+  onPress: () => void;
+}> = ({ onPress }) => {
+  type stylesType = {
+    touch: TouchableOpacityProps["style"];
+    text: TextStyle;
+  };
+  const styles: stylesType = {
+    touch: {
+      position: "absolute",
+      left: 10,
+      width: 50,
+      height: 50,
+      backgroundColor: "#0099CC",
+      borderColor: "white",
+      borderStyle: "solid",
+      borderWidth: 1,
+      borderRadius: 50,
+      alignContent: "center",
+      alignSelf: "center",
+      alignItems: "center",
+      display: "flex",
+    },
+    text: {
+      textAlign: "center",
+      width: "auto",
+      height: "auto",
+      textAlignVertical: "center",
+      fontWeight: "bold",
+      color: "white",
+    },
+  };
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.touch}>
+      <View style={{ flex: 1 }} />
+      <Ionicons name="arrow-back" color="white" size={30} />
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};