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

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>
+  );
+};