リファクタリング

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"
+    </Stack.Navigator>
-        component={Setting}
+  );
-        options={{
+}
+const optionData = {
   gestureEnabled: true,
   ...TransitionPresets.ModalPresentationIOS,
   cardOverlayEnabled: true,
   headerTransparent: true,
   headerShown: false,
-        }}
+};
-      />
-    </Stack.Navigator>
-  );
-}

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,41 +58,73 @@ 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%"),
+          currentStation.map((currentStation) => {
-      }}
+            let [preStation, nexStation] = getPreNextStation(currentStation);
-      /* onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)}  */
+            return (
-      onPress={oP}
+              <View style={styleSheet.下枠フレーム}>
-    >
+                <View style={styleSheet.下枠フレーム}>
-      <View
+                  {preStation && (
-        style={{
+                    <>
-          position: "absolute",
+                      <Text style={styleSheet.下枠左右マーク}>◀</Text>
-          bottom: "0%",
+                      {preStation.StationNumber != " " && (
-          left: "0%",
+                        <View style={styleSheet.下枠駅ナンバー}>
-          width: "100%",
+                          <View style={{ flex: 1 }} />
-          height: "30%",
-          backgroundColor: "#2E94BB",
-        }}
-      />
                           <Text
                             style={{
-          position: "absolute",
+                              fontSize: parseInt("10%"),
-          top: "2%",
+                              color: "white",
-          left: "2%",
-          fontWeight: "bold",
-          fontSize: parseInt("30%"),
-          color: "#2E94BB",
                             }}
                           >
-        JR
+                            {preStation.StationNumber}
                           </Text>
-      {currentStation
+                          <View style={{ flex: 1 }} />
+                        </View>
+                      )}
+                      <StationName
+                        stringData={preStation}
+                        ss={{ flex: 1, alignItems: "flex-start" }}
+                      />
+                    </>
+                  )}
+                </View>
+                <View style={styleSheet.下枠フレーム}>
+                  {nexStation && (
+                    <>
+                      <StationName
+                        stringData={nexStation}
+                        ss={{ flex: 1, alignItems: "flex-end" }}
+                      />
+                      <View style={styleSheet.下枠駅ナンバー}>
+                        <View style={{ flex: 1 }} />
+                        <Text
+                          style={{ fontSize: parseInt("10%"), color: "white" }}
+                        >
+                          {nexStation.StationNumber}
+                        </Text>
+                        <View style={{ flex: 1 }} />
+                      </View>
+                      <Text style={styleSheet.下枠左右マーク}>▶</Text>
+                    </>
+                  )}
+                </View>
+              </View>
+            );
+          })[nexPrePosition]
+        }
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const StationNumberMaker = (props) => {
+  return props.currentStation
     .filter((d) => (d.StationNumber != " " ? true : false))
     .map((d, index, array) => (
       <View
@@ -119,82 +151,100 @@ export default function Sign(props) {
         <Text style={{ fontSize: parseInt("20%") }}>{d.StationNumber}</Text>
         <View style={{ flex: 1 }} />
       </View>
-        ))}
+    ));
-      <View
+};
-        style={{
+
-          position: "absolute",
+const StationNameArea = (props) => {
-          top: "10%",
+  const { currentStation } = props;
-          alignContent: "center",
+  return (
-          flexDirection: "row",
+    <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
+        <Text style={styleSheet.Station_JP}>
-            style={{
-              fontWeight: "bold",
-              fontSize: parseInt("40%"),
-              color: "#005170",
-            }}
-          >
           {currentStation[0].Station_JP}
         </Text>
-          <Text
+        <Text style={styleSheet.Station_EN}>
-            style={{
-              fontWeight: "bold",
-              fontSize: parseInt("15%"),
-              color: "#005170",
-            }}
-          >
           {currentStation[0].Station_EN}
         </Text>
       </View>
       <View style={{ flex: 1 }} />
     </View>
-      <View
+  );
-        style={{
+};
+
+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",
-        }}
+  },
-      >
+  下枠フレーム: {
-        {
-          currentStation.map((currentStation) => {
-            let [preStation, nexStation] = getPreNextStation(currentStation);
-            return (
-              <View
-                style={{
     flex: 1,
     flexDirection: "row",
     alignContent: "center",
-                }}
+  },
-              >
+  下枠左右マーク: {
-                <View
-                  style={{
-                    flex: 1,
-                    flexDirection: "row",
-                    alignContent: "center",
-                  }}
-                >
-                  {preStation && [
-                    <Text
-                      style={{
     fontWeight: "bold",
     fontSize: parseInt("20%"),
     color: "white",
     paddingHorizontal: 10,
     textAlignVertical: "center",
-                      }}
+  },
-                    >
+  下枠駅ナンバー: {
-                      ◀
-                    </Text>,
-                    preStation.StationNumber != " " && (
-                      <View
-                        style={{
     alignContent: "center",
     alignItems: "center",
     width: wp("8%"),
@@ -203,113 +253,12 @@ export default function Sign(props) {
     borderColor: "white",
     borderWidth: parseInt("2%"),
     borderRadius: parseInt("100%"),
-                        }}
+  },
-                      >
+  下枠駅名: {
-                        <View style={{ flex: 1 }} />
-                        <Text
-                          style={{ fontSize: parseInt("10%"), color: "white" }}
-                        >
-                          {preStation.StationNumber}
-                        </Text>
-                        <View style={{ flex: 1 }} />
-                      </View>
-                    ),
-                    <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>
-            );
-          })[nexPrePosition]
-        }
-      </View>
-    </TouchableOpacity>
-  );
-}