ファイルの分離

StatusbarDetect.tsx

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { FC } from "react";
 import { Platform, StatusBar, View } from "react-native";
 
-export default function StatusbarDetect() {
+const StatusbarDetect: FC = () => {
   if (Platform.OS == "ios") {
     return <StatusBar barStyle="dark-content" />;
   } else if (Platform.OS == "android") {
     return <View />;
   }
-}
+};
+
+export default StatusbarDetect;

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>
-
+      <BigButton
-      <TouchableOpacity
+        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
+      <BigButton
-        style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
-        }}
         onPress={() => {
           AS.setItem("status", news);
           navigate("Apps");
         }}
-      >
+        string="更新情報を閉じる"
-        <View style={{ flex: 1 }} />
+      />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          更新情報を閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
     </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>
-  );
-};

howto.js

@@ -1,7 +1,7 @@
-const WEBVIEW = "WEBVIEW";
+import React from "react";
-import React, { Component } from "react";
+import { View } from "react-native";
-import { StatusBar, View, TouchableOpacity, Text } from "react-native";
 import { WebView } from "react-native-webview";
+import { BigButton } from "./components/atom/BigButton";
 export default ({ navigation: { navigate }, route }) => {
   const { info, goTo, useShow } = route.params;
   const onExit = () => {
@@ -9,30 +9,13 @@ export default ({ navigation: { navigate }, route }) => {
     useShow && useShow();
   };
   return (
-    <View style={styles.View}>
+    <View style={styles}>
       <WebView
         useWebKit
         source={{ uri: info.replace("http://", "https://") }}
       />
-      <TouchableOpacity style={styles.touch} onPress={onExit}>
+      <BigButton onPress={onExit} text="閉じる" />
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          閉じる
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
     </View>
   );
 };
-const styles = {
+const styles = { height: "100%", backgroundColor: "#0099CC" };
-  View: { height: "100%", backgroundColor: "#0099CC" },
-  touch: {
-    padding: 10,
-    flexDirection: "row",
-    borderColor: "white",
-    borderWidth: 1,
-    margin: 10,
-    borderRadius: 5,
-    alignItems: "center",
-  },
-};

lib/providerTreeProvider.js

@@ -17,7 +17,7 @@ export const buildProvidersTree = (providers) => {
   return buildProvidersTree([
     ({ children }) => (
       <FirstProvider>
-        <SecondProvider>{children}</SecondProvider>
+        <SecondProvider {...{ children }} />
       </FirstProvider>
     ),
     ...providers,

lib/webViewInjectjavascript.ts

@@ -1,5 +1,3 @@
-import { getJRF } from "../components/custom-train-data";
-
 type InjectJavascriptData = (
   a: string,
   b: string,

menu.js

@@ -137,6 +137,21 @@ export default function Menu({ getCurrentTrain }) {
         setTrainDiagram(trainList);
       });
   }, []);
+
+  const oPSign = () => {
+    const payload = {
+      currentStation:
+        originalStationList &&
+        allStationData.length != 0 &&
+        allStationData[selectedCurrentStation],
+      navigate: navigate,
+      goTo: "menu",
+      useShow: () => SheetManager.show("StationDetailView", { payload }),
+      onExit: () => SheetManager.hide("StationDetailView"),
+    };
+    SheetManager.show("StationDetailView", { payload });
+  };
+
   return (
     <View
       style={{
@@ -159,9 +174,7 @@ export default function Menu({ getCurrentTrain }) {
             enableMomentum
             callbackOffsetMargin={1000}
             activeAnimationOptions={0.3}
-            onSnapToItem={(d) => {
+            onSnapToItem={setSelectedCurrentStation}
-              setSelectedCurrentStation(d);
-            }}
             renderItem={({ item }) => {
               return (
                 <View
@@ -171,26 +184,7 @@ export default function Menu({ getCurrentTrain }) {
                   <Sign
                     currentStation={item}
                     isCurrentStation={item == currentStation}
-                    oP={() => {
+                    oP={oPSign}
-                      const payload = {
-                        currentStation:
-                          originalStationList &&
-                          allStationData.length != 0 &&
-                          allStationData[selectedCurrentStation],
-                        navigate: navigate,
-                        goTo: "menu",
-                        useShow: () =>
-                          SheetManager.show("StationDetailView", {
-                            payload,
-                          }),
-                        onExit: () => {
-                          SheetManager.hide("StationDetailView");
-                        },
-                      };
-                      SheetManager.show("StationDetailView", {
-                        payload,
-                      });
-                    }}
                   />
                 </View>
               );

storageControl.ts

@@ -2,8 +2,8 @@ import storage from "./storageConfig";
 import * as Updates from "expo-updates";
 
 export const AS = {
-  getItem: (key) => storage.load({ key }),
+  getItem: (key: string) => storage.load({ key }),
-  setItem: (key, data) =>
+  setItem: (key: string, data: any) =>
     storage.save({
       key, // Note: Do not use underscore("_") in key!
       data,
@@ -12,9 +12,12 @@ export const AS = {
       // if set to null, then it will never expire.
       expires: null,
     }),
-  removeItem: (key) => storage.remove({ key }),
+  removeItem: (key: string) => storage.remove({ key }),
 };
-export const ASCore = ({ k, s, d, u }) =>
+
+type ASCoreProps = (s: { k: any; s: any; d: any; u: any }) => Promise<any>;
+
+export const ASCore: ASCoreProps = ({ k, s, d, u }) =>
   AS.getItem(k)
     .then((d) =>
       d ? s(d) : AS.setItem(k, d).then(() => u && Updates.reloadAsync())