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

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) => {
-  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>
-  );
-};
-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>
-  );
-};
+import { UsefulBox } from "./components/atom/UsefulBox";
+import { TicketBox } from "./components/atom/TicketBox";
+import { TextBox } from "./components/atom/TextBox";
 
 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>
   );
 }