テキスト追加

components/trainMenu.js

@@ -35,7 +35,7 @@ export default function TrainMenu({ stationData, style }) {
         latitude: parseFloat(latlng[0]),
         longitude: parseFloat(latlng[1]),
       })),
-      { edgePadding: { top: 50, bottom: 50, left: 50, right: 50 } } // Add margin values here
+      { edgePadding: { top: 100, bottom: 50, left: 50, right: 50 } } // Add margin values here
     );
   }, [stationPin]);
   return (
@@ -95,7 +95,19 @@ export default function TrainMenu({ stationData, style }) {
           />
         ))}
       </MapView>
-      <View style={{ flexDirection: "row" }}>
+      <View style={{ position: "relative" }}>
+        <View
+          style={{
+            flexDirection: "row",
+            position: "absolute",
+            width: "100vw",
+            bottom: 0,
+            flex: 1,
+          }}
+        >
+          <Text style={{ position: "absolute", bottom: 40 }}>
+            路線記号からフィルタリング
+          </Text>
           {Object.keys(stationData).map((d) => (
             <TouchableOpacity
               style={{
@@ -103,18 +115,21 @@ export default function TrainMenu({ stationData, style }) {
                 backgroundColor: lineColorList[stationIDPair[d]],
                 padding: 5,
                 margin: 2,
-              borderRadius: 5,
+                borderRadius: 10,
                 alignItems: "center",
                 opacity: selectedLine == d ? 1 : !selectedLine ? 1 : 0.5,
               }}
               onPress={() => setSelectedLine(selectedLine == d ? undefined : d)}
             >
-            <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+              <Text
+                style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
+              >
                 {stationIDPair[d]}
               </Text>
             </TouchableOpacity>
           ))}
         </View>
+      </View>
       {navigate && (
         <View style={{ flexDirection: "row" }}>
           <UsefulBox