バスのある駅でデータを出すボタンを設置

components/ActionSheetComponents/StationDeteilView.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { View, Linking } from "react-native";
 import { FontAwesome, Foundation, Ionicons } from "@expo/vector-icons";
 import ActionSheet from "react-native-actions-sheet";
@@ -17,7 +17,20 @@ export const StationDeteilView = (props) => {
     originalStationList,
     favoriteStation,
     setFavoriteStation,
+    busAndTrainData,
   } = props;
+  const [trainBus, setTrainBus] = useState();
+  useEffect(() => {
+    if (!currentStation) return () => {};
+    const data = busAndTrainData.filter((d) => {
+      return d.name === currentStation[0].Station_JP;
+    });
+    if (data.length == 0) {
+      setTrainBus();
+      return () => {};
+    }
+    setTrainBus(data[0]);
+  }, [currentStation]);
 
   return (
     <ActionSheet
@@ -98,7 +111,17 @@ export const StationDeteilView = (props) => {
                     Linking.openURL(currentStation[0].StationMap)
                   }
                 >
-                  GoogleMap
+                  Map
+                </TicketBox>
+              )}
+              {!trainBus || (
+                <TicketBox
+                  backgroundColor={"#CE5C00"}
+                  icon={<Ionicons name="bus" color="white" size={50} />}
+                  flex={1}
+                  onPressButton={() => Linking.openURL(trainBus.address)}
+                >
+                  平行バス
                 </TicketBox>
               )}
             </View>