ファイルの分離

components/AllTrainDiagramView.js

@@ -15,6 +15,7 @@ import { customTrainDataDetector } from "./custom-train-data";
 import { getTrainType } from "../lib/getTrainType";
 import { SheetManager } from "react-native-actions-sheet";
 import { useNavigation } from "@react-navigation/native";
+import { BigButton } from "./atom/BigButton";
 export default function AllTrainDiagramView() {
   const { navigate } = useNavigation();
   const { keyList } = useAllTrainDiagram();
@@ -91,27 +92,14 @@ export default function AllTrainDiagramView() {
           />
         </View>
       </KeyboardAvoidingView>
-
-      <TouchableOpacity
+      <BigButton
+        onPress={() => navigate("menu")}
+        string="閉じる"
         style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
           display:
             Platform.OS === "ios" ? "flex" : keyBoardVisible ? "none" : "flex",
         }}
-        onPress={() => navigate("menu")}
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
+      />
     </View>
   );
 }

components/TrainMenu/MapPin.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from "react";
+import { Marker } from "react-native-maps";
+type Props = {
+  index: number;
+  indexBase: number;
+  latlng: string[];
+  D: any;
+  d: string;
+  navigate: (screen: string) => void;
+  webview: any;
+};
+
+export const MapPin: FC<Props> = (props) => {
+  const { index, indexBase, latlng, D, d, navigate, webview } = props;
+  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>
+  );
+};

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>
+  );
+};

components/TrainMenu/UsefulBox.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from "react";
+import { Text, TouchableOpacity } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+type Props = {
+  icon: keyof typeof MaterialCommunityIcons.glyphMap;
+  backgroundColor: string;
+  flex: number;
+  onPressButton: () => void;
+  children: string;
+};
+
+export const UsefulBox: FC<Props> = (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>
+  );
+};

components/atom/BigButton.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from "react";
+import { Text, TouchableOpacity, View, ViewStyle } from "react-native";
+
+type Props = {
+  onPress: () => void;
+  string: string;
+  style?: ViewStyle;
+};
+export const BigButton: FC<Props> = ({ onPress, string,style }) => {
+  return (
+    <TouchableOpacity
+      style={{
+        padding: 10,
+        flexDirection: "row",
+        borderColor: "white",
+        borderWidth: 1,
+        margin: 10,
+        borderRadius: 5,
+        alignItems: "center",
+        ...style,
+      }}
+      onPress={onPress}
+    >
+      <View style={{ flex: 1 }} />
+      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+        {string}
+      </Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};

components/custom-train-data.ts

@@ -1,4 +1,4 @@
-export const customTrainDataDetector = (TrainNumber) => {
+export const customTrainDataDetector = (TrainNumber: string) => {
   switch (TrainNumber) {
     //しおかぜメイン
     //8000 ノーマル
@@ -627,7 +627,7 @@ export const customTrainDataDetector = (TrainNumber) => {
       break;
   }
 };
-export const getJRF = (num) => {
+export const getJRF = (num: string) => {
   switch (num) {
     case "71":
       return "東京(タ)→高松(タ)\\n";
@@ -657,7 +657,6 @@ export const getJRF = (num) => {
     case "9070":
       return "臨時貨物\\n";
     default:
-      JRF = true;
       return null;
   }
 };

components/news.js

@@ -5,6 +5,7 @@ import StatusbarDetect from "../StatusbarDetect";
 import { AS } from "../storageControl";
 import { news } from "../config/newsUpdate";
 import { useNavigation } from "@react-navigation/native";
+import { BigButton } from "./atom/BigButton";
 var Status = StatusbarDetect();
 export default function News() {
   const { navigate } = useNavigation();
@@ -18,27 +19,13 @@ export default function News() {
         mixedContentMode={"compatibility"}
         javaScriptEnabled={true}
       />
-      <TouchableOpacity
-        style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
-        }}
+      <BigButton
         onPress={() => {
           AS.setItem("status", news);
           navigate("Apps");
         }}
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          更新情報を閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
+        string="更新情報を閉じる"
+      />
     </View>
   );
 }

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>
-  );
-};
+}