ファイルの分離

components/trainMenu.js

@@ -9,6 +9,9 @@ import { stationIDPair } from "../lib/getStationList2";
 import { lineListPair } from "../lib/getStationList";
 import { SheetManager } from "react-native-actions-sheet";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
+import { MapPin } from "./TrainMenu/MapPin";
+import { UsefulBox } from "./TrainMenu/UsefulBox";
+import { MapsButton } from "./TrainMenu/MapsButton";
 export default function TrainMenu({ style }) {
   const { webview } = useCurrentTrain();
   const mapRef = useRef();
@@ -206,80 +209,4 @@ export default function TrainMenu({ style }) {
       />
     </View>
   );
-}
-const UsefulBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
-  return (
-    <TouchableOpacity
-      style={{
-        flex: flex,
-        backgroundColor: backgroundColor,
-        padding: 5,
-        alignItems: "center",
-        margin: 2,
-      }}
-      onPress={onPressButton}
-    >
-      <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
-        {children}
-      </Text>
-    </TouchableOpacity>
-  );
-};
-
-const MapPin = ({ index, indexBase, latlng, D, d, navigate, webview }) => {
-  return (
-    <Marker
-      key={index + indexBase}
-      coordinate={{
-        latitude: parseFloat(latlng[0]),
-        longitude: parseFloat(latlng[1]),
-      }}
-      onPress={() => {
-        webview.current?.injectJavaScript(
-          `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
-          document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
-        );
-        if (navigate) navigate("Apps");
-      }}
-      image={require("../assets/reccha-small.png")}
-    ></Marker>
-  );
-};
-
-const MapsButton = ({ onPress, top, mapSwitch }) => {
-  const styles = {
-    touch: {
-      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,
-    },
-    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="close" color="white" size={30} />
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  );
-};
+}