通過表示のオンオフを実装

components/ActionSheetComponents/EachTrainInfo/EachStopList.js

@@ -10,7 +10,9 @@ export const EachStopList = ({
   points,
   currentTrainData,
   openStationACFromEachTrainInfo,
+  showThrew,
 }) => {
+  if (!showThrew && i.split(",")[1] == "通過") return null;
   const [station, se, time] = i.split(","); // 阿波池田,発,6:21
   const Stations = stationList
     .map((a) => a.filter((d) => d.StationName == station))
@@ -43,7 +45,7 @@ export const EachStopList = ({
     .set("hour", parseInt(time.split(":")[0]))
     .set("minute", parseInt(time.split(":")[1]))
     .add(isNaN(currentTrainData?.delay) ? 0 : currentTrainData.delay, "minute");
-  const timeString = se == "通過"? "" :dates.format("HH:mm").split(":");
+  const timeString = se == "通過" ? "" : dates.format("HH:mm").split(":");
 
   return (
     <TouchableWithoutFeedback
@@ -66,7 +68,9 @@ export const EachStopList = ({
           {lineIDs.map((lineID, index) => (
             <View
               style={{
-                backgroundColor: lineColorList[lineID],
+                backgroundColor: `${lineColorList[lineID]}${
+                  se == "通過" ? "80" : ""
+                }`,
                 flex: 1,
               }}
               key={lineID}
@@ -97,7 +101,11 @@ export const EachStopList = ({
             flex: 1,
           }}
         >
-          <Text style={{ fontSize: 20 }}>{station}</Text>
+          <Text
+            style={{ fontSize: 20, color: `#000${se == "通過" ? "5" : ""}` }}
+          >
+            {station}
+          </Text>
           <View style={{ flex: 1 }} />
           {points && points.findIndex((d) => d == index) >= 0 ? (
             <Text style={{ fontSize: 20, marginRight: 70 }}>🚊</Text>

components/ActionSheetComponents/EachTrainInfo/ScrollStickyContent.js

@@ -1,7 +1,8 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View, Text, LayoutAnimation } from "react-native";
 
-export const ScrollStickyContent = ({ currentTrainData }) => {
+export const ScrollStickyContent = (props) => {
+  const { currentTrainData, showThrew, setShowThrew, haveThrough } = props;
   return (
     <View
       style={{
@@ -49,7 +50,27 @@ export const ScrollStickyContent = ({ currentTrainData }) => {
           >
             見込
           </Text>
-          <Text style={{ fontSize: 20, width: 50 }}></Text>
+          <Text
+            style={{
+              fontSize: 15,
+              width: 50,
+              paddingBottom: 0,
+              margin: 0,
+              textAlign: "center",
+              textAlignVertical: "center",
+              opacity: haveThrough ? 1 : 0,
+            }}
+            onPress={() => {
+              if (!haveThrough) return;
+              LayoutAnimation.configureNext({
+                duration: 200,
+                update: { type: "easeInEaseOut", springDamping: 0.6 },
+              });
+              setShowThrew(!showThrew);
+            }}
+          >
+            (通過{showThrew ? "▼" : "▶"})
+          </Text>
         </View>
       </View>
     </View>