リファクタリング

App.js

@@ -14,7 +14,6 @@ import trainbase from "./trainbaseview";
 import howto from "./howto";
 import menu from "./menu";
 import News from "./components/news.js";
-import TestArea from "./TestArea.js";
 import Setting from "./components/settings.js";
 import trainMenu from "./components/trainMenu.js";
 const Stack = createStackNavigator();
@@ -26,7 +25,6 @@ if (Platform.OS === "android") {
 }
 export default function App() {
   const navigationRef = useRef();
-  var platform = Platform.OS === "android" ? 70 : 50;
   useEffect(() => UpdateAsync(), []);
   return (
     <NavigationContainer name="Root" ref={navigationRef} style={{ flex: 1 }}>
@@ -38,9 +36,7 @@ export default function App() {
             tabBarLabel: "位置情報",
             headerTransparent: true,
             gestureEnabled: true,
-            tabBarIcon: ({ color, size }) => (
+            tabBarIcon: () => <AntDesign name="barchart" size={32} />,
-              <AntDesign name="barchart" size={32} />
-            ),
           }}
         />
         <Stack.Screen
@@ -50,9 +46,7 @@ export default function App() {
             tabBarLabel: "リンク",
             headerTransparent: true,
             gestureEnabled: true,
-            tabBarIcon: ({ color, size }) => (
+            tabBarIcon: () => <Ionicons name="ios-radio" size={32} />,
-              <Ionicons name="ios-radio" size={32} />
-            ),
           }}
         />
         <Stack.Screen
@@ -62,9 +56,7 @@ export default function App() {
             tabBarLabel: "運行情報",
             headerTransparent: true,
             gestureEnabled: true,
-            tabBarIcon: ({ color, size }) => (
+            tabBarIcon: () => <Ionicons name="md-train" size={32} />,
-              <Ionicons name="md-train" size={32} />
-            ),
           }}
         />
       </Tab.Navigator>
@@ -97,35 +89,14 @@ function top() {
         component={howto}
         options={{
           title: "使い方",
-          gestureEnabled: true,
+          ...optionData,
-          ...TransitionPresets.ModalPresentationIOS,
-          cardOverlayEnabled: true,
-          headerTransparent: true,
-          headerShown: false,
-        }}
-      />
-      <Stack.Screen name="test" component={TestArea} options={{}} />
-      <Stack.Screen
-        name="news"
-        component={News}
-        options={{
-          gestureEnabled: true,
-          ...TransitionPresets.ModalPresentationIOS,
-          cardOverlayEnabled: true,
-          headerTransparent: true,
-          headerShown: false,
         }}
       />
+      <Stack.Screen name="news" component={News} options={optionData} />
       <Stack.Screen
         name="trainMenu"
         component={trainMenu}
-        options={{
+        options={optionData}
-          gestureEnabled: true,
-          ...TransitionPresets.ModalPresentationIOS,
-          cardOverlayEnabled: true,
-          headerTransparent: true,
-          headerShown: false,
-        }}
       />
     </Stack.Navigator>
   );
@@ -142,17 +113,14 @@ function menuPage() {
           headerTransparent: true,
         }}
       />
-      <Stack.Screen
+      <Stack.Screen name="setting" component={Setting} options={optionData} />
-        name="setting"
-        component={Setting}
-        options={{
-          gestureEnabled: true,
-          ...TransitionPresets.ModalPresentationIOS,
-          cardOverlayEnabled: true,
-          headerTransparent: true,
-          headerShown: false,
-        }}
-      />
     </Stack.Navigator>
   );
 }
+const optionData = {
+  gestureEnabled: true,
+  ...TransitionPresets.ModalPresentationIOS,
+  cardOverlayEnabled: true,
+  headerTransparent: true,
+  headerShown: false,
+};

Apps.js

@@ -201,11 +201,8 @@ export default function Apps(props) {
         injectedJavaScript={injectJavascript}
       />
       <TouchableOpacity
-        onPress={
+        onPress={() =>
-          () => navigate("trainMenu", { webview, stationData: mapsStationData })
+          navigate("trainMenu", { webview, stationData: mapsStationData })
-          /* {
-            setSelectedStation("松山");
-          } */
         }
         style={{
           position: "absolute",

TestArea.js

@@ -1,72 +0,0 @@
-import React, { Component, useEffect, useState } from "react";
-import { StatusBar, View, ScrollView, Linking, Text } from "react-native";
-import Constants from "expo-constants";
-import { ListItem } from "react-native-elements";
-import Icon from "react-native-vector-icons/Entypo";
-import StatusbarDetect from "./StatusbarDetect";
-var Status = StatusbarDetect();
-let a = [];
-export default function TestArea(props) {
-  const [data, setdata] = useState(null);
-  useEffect(() => {
-    data == null
-      ? test().then((res) => {
-          setdata(res);
-        })
-      : null;
-  }, [data]);
-  return (
-    <View style={{ height: "100%", paddingTop: Constants.statusBarHeight }}>
-      {Status}
-      <ScrollView>
-        <Text>TEST AREA!!</Text>
-        {data}
-      </ScrollView>
-    </View>
-  );
-}
-
-async function test() {
-  return fetch("https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train", {
-    headers: {
-      authority: "train.jr-shikoku.co.jp",
-      "cache-control": "no-cache",
-      pragma: "no-cache",
-      "if-modified-since": "Thu, 01 Jun 1970 00:00:00 GMT",
-      accept: "*/*",
-      "sec-fetch-site": "same-origin",
-      "sec-fetch-mode": "cors",
-      referer: "https://train.jr-shikoku.co.jp/sp.html",
-    },
-  })
-    .then((res) => res.json())
-    .then((D) => {
-      let d = [];
-      D.forEach((element) => {
-        d.push(
-          <ListItem
-            title={
-              "Direction:" +
-              element.Direction +
-              " Index:" +
-              element.Index +
-              " Line:" +
-              element.Line +
-              " Pos:" +
-              element.Pos +
-              " PosNum:" +
-              element.PosNum +
-              " TrainNum:" +
-              element.TrainNum +
-              " Type:" +
-              element.Type +
-              " Delay:" +
-              element.delay
-            }
-          />
-        );
-      });
-      a = d;
-      return d;
-    });
-}

components/駅名表/Sign.js

@@ -58,252 +58,61 @@ export default function Sign(props) {
     }
   }, [currentStation]);
   return (
-    <TouchableOpacity
+    <TouchableOpacity style={styleSheet.外枠} onPress={oP}>
-      style={{
+      <StationNumberMaker currentStation={currentStation} />
-        width: wp("80%"),
+      <StationNameArea currentStation={currentStation} />
-        height: (wp("80%") / 20) * 9,
+      <Text style={styleSheet.JRStyle}>JR</Text>
-        borderColor: "#2E94BB",
+      <View style={styleSheet.下帯} />
-        borderWidth: 1,
+      <View style={styleSheet.下帯内容}>
-        margin: 10,
-        marginHorizontal: wp("10%"),
-      }}
-      /* onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)}  */
-      onPress={oP}
-    >
-      <View
-        style={{
-          position: "absolute",
-          bottom: "0%",
-          left: "0%",
-          width: "100%",
-          height: "30%",
-          backgroundColor: "#2E94BB",
-        }}
-      />
-      <Text
-        style={{
-          position: "absolute",
-          top: "2%",
-          left: "2%",
-          fontWeight: "bold",
-          fontSize: parseInt("30%"),
-          color: "#2E94BB",
-        }}
-      >
-        JR
-      </Text>
-      {currentStation
-        .filter((d) => (d.StationNumber != " " ? true : false))
-        .map((d, index, array) => (
-          <View
-            style={{
-              position: "absolute",
-              alignContent: "center",
-              alignItems: "center",
-              top:
-                (() => {
-                  if (array.length == 1) return 20;
-                  else if (index == 0) return 5;
-                  else if (index == 1) return 35;
-                  else return 20;
-                })() + "%",
-              right: "10%",
-              width: wp("10%"),
-              height: wp("10%"),
-              borderColor: "#2E94BB",
-              borderWidth: parseInt("2%"),
-              borderRadius: parseInt("100%"),
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <Text style={{ fontSize: parseInt("20%") }}>{d.StationNumber}</Text>
-            <View style={{ flex: 1 }} />
-          </View>
-        ))}
-      <View
-        style={{
-          position: "absolute",
-          top: "10%",
-          alignContent: "center",
-          flexDirection: "row",
-        }}
-      >
-        <View style={{ flex: 1 }} />
-        <View style={{ alignItems: "center" }}>
-          {/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text>  */}
-          <Text
-            style={{
-              fontWeight: "bold",
-              fontSize: parseInt("40%"),
-              color: "#005170",
-            }}
-          >
-            {currentStation[0].Station_JP}
-          </Text>
-          <Text
-            style={{
-              fontWeight: "bold",
-              fontSize: parseInt("15%"),
-              color: "#005170",
-            }}
-          >
-            {currentStation[0].Station_EN}
-          </Text>
-        </View>
-        <View style={{ flex: 1 }} />
-      </View>
-      <View
-        style={{
-          position: "absolute",
-          bottom: "0%",
-          height: "30%",
-          width: "100%",
-          alignItems: "center",
-          flexDirection: "column",
-        }}
-      >
         {
           currentStation.map((currentStation) => {
             let [preStation, nexStation] = getPreNextStation(currentStation);
             return (
-              <View
+              <View style={styleSheet.下枠フレーム}>
-                style={{
+                <View style={styleSheet.下枠フレーム}>
-                  flex: 1,
+                  {preStation && (
-                  flexDirection: "row",
+                    <>
-                  alignContent: "center",
+                      <Text style={styleSheet.下枠左右マーク}>◀</Text>
-                }}
+                      {preStation.StationNumber != " " && (
-              >
+                        <View style={styleSheet.下枠駅ナンバー}>
-                <View
+                          <View style={{ flex: 1 }} />
-                  style={{
+                          <Text
-                    flex: 1,
+                            style={{
-                    flexDirection: "row",
+                              fontSize: parseInt("10%"),
-                    alignContent: "center",
+                              color: "white",
-                  }}
+                            }}
-                >
+                          >
-                  {preStation && [
+                            {preStation.StationNumber}
-                    <Text
+                          </Text>
-                      style={{
+                          <View style={{ flex: 1 }} />
-                        fontWeight: "bold",
+                        </View>
-                        fontSize: parseInt("20%"),
+                      )}
-                        color: "white",
+                      <StationName
-                        paddingHorizontal: 10,
+                        stringData={preStation}
-                        textAlignVertical: "center",
+                        ss={{ flex: 1, alignItems: "flex-start" }}
-                      }}
+                      />
-                    >
+                    </>
-                      ◀
+                  )}
-                    </Text>,
+                </View>
-                    preStation.StationNumber != " " && (
+                <View style={styleSheet.下枠フレーム}>
-                      <View
+                  {nexStation && (
-                        style={{
+                    <>
-                          alignContent: "center",
+                      <StationName
-                          alignItems: "center",
+                        stringData={nexStation}
-                          width: wp("8%"),
+                        ss={{ flex: 1, alignItems: "flex-end" }}
-                          height: wp("8%"),
+                      />
-                          margin: wp("1%"),
+                      <View style={styleSheet.下枠駅ナンバー}>
-                          borderColor: "white",
-                          borderWidth: parseInt("2%"),
-                          borderRadius: parseInt("100%"),
-                        }}
-                      >
                         <View style={{ flex: 1 }} />
                         <Text
                           style={{ fontSize: parseInt("10%"), color: "white" }}
                         >
-                          {preStation.StationNumber}
+                          {nexStation.StationNumber}
                         </Text>
                         <View style={{ flex: 1 }} />
                       </View>
-                    ),
+                      <Text style={styleSheet.下枠左右マーク}>▶</Text>
-                    <View style={{ flex: 1, alignItems: "flex-start" }}>
+                    </>
-                      <Text
+                  )}
-                        style={{
-                          fontWeight: "bold",
-                          fontSize: parseInt("15%"),
-                          color: "white",
-                          flex: 1,
-                          textAlignVertical: "center",
-                        }}
-                      >
-                        {preStation.Station_JP}
-                      </Text>
-                      <Text
-                        style={{
-                          fontWeight: "bold",
-                          fontSize: parseInt("15%"),
-                          color: "white",
-                          flex: 1,
-                          textAlignVertical: "center",
-                        }}
-                      >
-                        {preStation.Station_EN}
-                      </Text>
-                    </View>,
-                  ]}
-                </View>
-                <View
-                  style={{
-                    flex: 1,
-                    flexDirection: "row",
-                    alignContent: "center",
-                  }}
-                >
-                  {nexStation && [
-                    <View style={{ flex: 1, alignItems: "flex-end" }}>
-                      <Text
-                        style={{
-                          fontWeight: "bold",
-                          fontSize: parseInt("15%"),
-                          color: "white",
-                          flex: 1,
-                          textAlignVertical: "center",
-                        }}
-                      >
-                        {nexStation.Station_JP}
-                      </Text>
-                      <Text
-                        style={{
-                          fontWeight: "bold",
-                          fontSize: parseInt("15%"),
-                          color: "white",
-                          flex: 1,
-                          textAlignVertical: "center",
-                        }}
-                      >
-                        {nexStation.Station_EN}
-                      </Text>
-                    </View>,
-                    <View
-                      style={{
-                        alignContent: "center",
-                        alignItems: "center",
-                        width: wp("8%"),
-                        height: wp("8%"),
-                        margin: wp("1%"),
-                        borderColor: "white",
-                        borderWidth: parseInt("2%"),
-                        borderRadius: parseInt("100%"),
-                      }}
-                    >
-                      <View style={{ flex: 1 }} />
-                      <Text
-                        style={{ fontSize: parseInt("10%"), color: "white" }}
-                      >
-                        {nexStation.StationNumber}
-                      </Text>
-                      <View style={{ flex: 1 }} />
-                    </View>,
-                    <Text
-                      style={{
-                        fontWeight: "bold",
-                        fontSize: parseInt("20%"),
-                        color: "white",
-                        paddingHorizontal: 10,
-                        textAlignVertical: "center",
-                      }}
-                    >
-                      ▶
-                    </Text>,
-                  ]}
                 </View>
               </View>
             );
@@ -313,3 +122,143 @@ export default function Sign(props) {
     </TouchableOpacity>
   );
 }
+
+const StationNumberMaker = (props) => {
+  return props.currentStation
+    .filter((d) => (d.StationNumber != " " ? true : false))
+    .map((d, index, array) => (
+      <View
+        style={{
+          position: "absolute",
+          alignContent: "center",
+          alignItems: "center",
+          top:
+            (() => {
+              if (array.length == 1) return 20;
+              else if (index == 0) return 5;
+              else if (index == 1) return 35;
+              else return 20;
+            })() + "%",
+          right: "10%",
+          width: wp("10%"),
+          height: wp("10%"),
+          borderColor: "#2E94BB",
+          borderWidth: parseInt("2%"),
+          borderRadius: parseInt("100%"),
+        }}
+      >
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: parseInt("20%") }}>{d.StationNumber}</Text>
+        <View style={{ flex: 1 }} />
+      </View>
+    ));
+};
+
+const StationNameArea = (props) => {
+  const { currentStation } = props;
+  return (
+    <View style={styleSheet.stationNameAreaOverWrap}>
+      <View style={{ flex: 1 }} />
+      <View style={{ alignItems: "center" }}>
+        {/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text>  */}
+        <Text style={styleSheet.Station_JP}>
+          {currentStation[0].Station_JP}
+        </Text>
+        <Text style={styleSheet.Station_EN}>
+          {currentStation[0].Station_EN}
+        </Text>
+      </View>
+      <View style={{ flex: 1 }} />
+    </View>
+  );
+};
+
+const StationName = (props) => {
+  const { stringData, ss } = props;
+  return (
+    <View style={ss}>
+      <Text style={styleSheet.下枠駅名}>{stringData.Station_JP}</Text>
+      <Text style={styleSheet.下枠駅名}>{stringData.Station_EN}</Text>
+    </View>
+  );
+};
+
+const styleSheet = {
+  外枠: {
+    width: wp("80%"),
+    height: (wp("80%") / 20) * 9,
+    borderColor: "#2E94BB",
+    borderWidth: 1,
+    margin: 10,
+    marginHorizontal: wp("10%"),
+  },
+  下帯: {
+    position: "absolute",
+    bottom: "0%",
+    left: "0%",
+    width: "100%",
+    height: "30%",
+    backgroundColor: "#2E94BB",
+  },
+  JRStyle: {
+    position: "absolute",
+    top: "2%",
+    left: "2%",
+    fontWeight: "bold",
+    fontSize: parseInt("30%"),
+    color: "#2E94BB",
+  },
+  stationNameAreaOverWrap: {
+    position: "absolute",
+    top: "10%",
+    alignContent: "center",
+    flexDirection: "row",
+  },
+  Station_JP: {
+    fontWeight: "bold",
+    fontSize: parseInt("40%"),
+    color: "#005170",
+  },
+  Station_EN: {
+    fontWeight: "bold",
+    fontSize: parseInt("15%"),
+    color: "#005170",
+  },
+  下帯内容: {
+    position: "absolute",
+    bottom: "0%",
+    height: "30%",
+    width: "100%",
+    alignItems: "center",
+    flexDirection: "column",
+  },
+  下枠フレーム: {
+    flex: 1,
+    flexDirection: "row",
+    alignContent: "center",
+  },
+  下枠左右マーク: {
+    fontWeight: "bold",
+    fontSize: parseInt("20%"),
+    color: "white",
+    paddingHorizontal: 10,
+    textAlignVertical: "center",
+  },
+  下枠駅ナンバー: {
+    alignContent: "center",
+    alignItems: "center",
+    width: wp("8%"),
+    height: wp("8%"),
+    margin: wp("1%"),
+    borderColor: "white",
+    borderWidth: parseInt("2%"),
+    borderRadius: parseInt("100%"),
+  },
+  下枠駅名: {
+    fontWeight: "bold",
+    fontSize: parseInt("15%"),
+    color: "white",
+    flex: 1,
+    textAlignVertical: "center",
+  },
+};