駅メニューのコンポーネント化

components/ActionSheetComponents/StationDeteilView.js

@@ -1,4 +1,46 @@
+import React, { Component, useRef, useState, useEffect } from "react";
+import {
+  StatusBar,
+  Platform,
+  View,
+  LayoutAnimation,
+  ScrollView,
+  Linking,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import Image from "react-native-remote-svg";
+import Constants from "expo-constants";
+import { List, ListItem } from "native-base";
+import Icon from "react-native-vector-icons/Entypo";
+import * as Location from "expo-location";
+import StatusbarDetect from "../../StatusbarDetect";
+var Status = StatusbarDetect();
+import { useNavigation } from "@react-navigation/native";
+import AutoHeightImage from "react-native-auto-height-image";
+import {
+  widthPercentageToDP as wp,
+  heightPercentageToDP as hp,
+} from "react-native-responsive-screen";
+import {
+  FontAwesome,
+  Fontisto,
+  Foundation,
+  Ionicons,
+  MaterialCommunityIcons,
+} from "@expo/vector-icons";
+import * as WebBrowser from "expo-web-browser";
+import ActionSheet from "react-native-actions-sheet";
+import LottieView from "lottie-react-native";
+import SvgUri from "react-native-svg-uri";
+import Sign from "../../components/駅名表/Sign";
+
+import { UsefulBox } from "../atom/UsefulBox";
+import { TicketBox } from "../atom/TicketBox";
+import { TextBox } from "../atom/TextBox";
+
 export const StationDeteilView = (props) => {
+  const { StationBoardAcSR, currentStation, originalStationList } = props;
   return (
     <ActionSheet
       ref={StationBoardAcSR}

components/atom/TextBox.js

@@ -0,0 +1,23 @@
+import { TouchableOpacity, View } from "react-native";
+
+export const TextBox = (props) => {
+  const { backgroundColor, flex, onPressButton, children } = props;
+  return (
+    <TouchableOpacity
+      style={{
+        flex: flex,
+        backgroundColor: backgroundColor,
+        padding: 10,
+        height: 70,
+        alignItems: "center",
+        alignContent: "center",
+        margin: 2,
+      }}
+      onPress={onPressButton}
+    >
+      <View style={{ flex: 1 }} />
+      {children}
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};

components/atom/TicketBox.js

@@ -0,0 +1,24 @@
+import { TouchableOpacity, Text } from "react-native";
+
+export const TicketBox = (props) => {
+  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  return (
+    <TouchableOpacity
+      style={{
+        flex: flex,
+        backgroundColor: backgroundColor,
+        borderColor: "#0099CC",
+        padding: 10,
+        borderWidth: 1,
+        margin: 2,
+        alignItems: "center",
+      }}
+      onPress={onPressButton}
+    >
+      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
+        {children}
+      </Text>
+      {icon}
+    </TouchableOpacity>
+  );
+};

components/atom/UsefulBox.js

@@ -0,0 +1,22 @@
+import { TouchableOpacity, Text } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+export const UsefulBox = (props) => {
+  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  return (
+    <TouchableOpacity
+      style={{
+        flex: flex,
+        backgroundColor: backgroundColor,
+        padding: 10,
+        alignItems: "center",
+        margin: 2,
+      }}
+      onPress={onPressButton}
+    >
+      <MaterialCommunityIcons name={icon} color="white" size={50} />
+      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
+        {children}
+      </Text>
+    </TouchableOpacity>
+  );
+};

menu.js

@@ -33,6 +33,7 @@ import * as WebBrowser from "expo-web-browser";
 import ActionSheet from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
 import SvgUri from "react-native-svg-uri";
+import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
 
 import 予讃線 from "./assets/四国旅客鉄道予讃線.json";
 import 土讃線 from "./assets/四国旅客鉄道土讃線.json";
@@ -43,70 +44,9 @@ import 鳴門線 from "./assets/四国旅客鉄道鳴門線.json";
 import LED_vision from "./components/発車時刻表/LED_vidion";
 import Sign from "./components/駅名表/Sign";
 
-const UsefulBox = (props) => {
+import { UsefulBox } from "./components/atom/UsefulBox";
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
+import { TicketBox } from "./components/atom/TicketBox";
-  return (
+import { TextBox } from "./components/atom/TextBox";
-    <TouchableOpacity
-      style={{
-        flex: flex,
-        backgroundColor: backgroundColor,
-        padding: 10,
-        alignItems: "center",
-        margin: 2,
-      }}
-      onPress={onPressButton}
-    >
-      <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
-        {children}
-      </Text>
-    </TouchableOpacity>
-  );
-};
-const TicketBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
-  return (
-    <TouchableOpacity
-      style={{
-        flex: flex,
-        backgroundColor: backgroundColor,
-        borderColor: "#0099CC",
-        padding: 10,
-        borderWidth: 1,
-        margin: 2,
-        alignItems: "center",
-      }}
-      onPress={onPressButton}
-    >
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
-        {children}
-      </Text>
-      {icon}
-    </TouchableOpacity>
-  );
-};
-
-const TextBox = (props) => {
-  const { backgroundColor, flex, onPressButton, children } = props;
-  return (
-    <TouchableOpacity
-      style={{
-        flex: flex,
-        backgroundColor: backgroundColor,
-        padding: 10,
-        height: 70,
-        alignItems: "center",
-        alignContent: "center",
-        margin: 2,
-      }}
-      onPress={onPressButton}
-    >
-      <View style={{ flex: 1 }} />
-      {children}
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  );
-};
 
 export default function Menu(props) {
   const {
@@ -850,6 +790,11 @@ export default function Menu(props) {
           source={require("./assets/トレインビジョン関係/1.svg")}
         /> */}
       </ScrollView>
+      <StationDeteilView
+        StationBoardAcSR={StationBoardAcSR}
+        currentStation={currentStation}
+        originalStationList={originalStationList}
+      />
       <ActionSheet
         ref={JRSTraInfoEXAcSR}
         gestureEnabled
@@ -978,82 +923,6 @@ export default function Menu(props) {
           </ScrollView>
         </View>
       </ActionSheet>
-      <ActionSheet
-        ref={StationBoardAcSR}
-        gestureEnabled
-        CustomHeaderComponent={() => {}}
-      >
-        <View
-          style={{
-            backgroundColor: "white",
-            borderRadius: 5,
-            borderColor: "dark",
-            borderWidth: 1,
-          }}
-        >
-          <View style={{ height: 26, width: "100%" }}>
-            <View
-              style={{
-                height: 6,
-                width: 45,
-                borderRadius: 100,
-                backgroundColor: "#f0f0f0",
-                marginVertical: 10,
-                alignSelf: "center",
-              }}
-            />
-          </View>
-          <ScrollView>
-            {currentStation && (
-              <Sign
-                currentStation={currentStation}
-                originalStationList={originalStationList}
-                oP={() => Linking.openURL(currentStation[0].StationTimeTable)}
-              />
-            )}
-            {currentStation && (
-              <View style={{ flexDirection: "row" }}>
-                {!currentStation[0].JrHpUrl || (
-                  <TicketBox
-                    backgroundColor={"#AD7FA8"}
-                    icon={<Foundation name="web" color="white" size={50} />}
-                    flex={1}
-                    onPressButton={() =>
-                      Linking.openURL(currentStation[0].JrHpUrl)
-                    }
-                  >
-                    web
-                  </TicketBox>
-                )}
-                {!currentStation[0].StationTimeTable || (
-                  <TicketBox
-                    backgroundColor={"#8F5902"}
-                    icon={<FontAwesome name="table" color="white" size={50} />}
-                    flex={1}
-                    onPressButton={() =>
-                      Linking.openURL(currentStation[0].StationTimeTable)
-                    }
-                  >
-                    時刻表
-                  </TicketBox>
-                )}
-                {!currentStation[0].StationMap || (
-                  <TicketBox
-                    backgroundColor={"#888A85"}
-                    icon={<Ionicons name="map" color="white" size={50} />}
-                    flex={1}
-                    onPressButton={() =>
-                      Linking.openURL(currentStation[0].StationMap)
-                    }
-                  >
-                    GoogleMap
-                  </TicketBox>
-                )}
-              </View>
-            )}
-          </ScrollView>
-        </View>
-      </ActionSheet>
     </View>
   );
 }