スワイプをやめてボタンを押して拡張できるように変更

components/ActionSheetComponents/EachTrainInfo.js

@@ -54,6 +54,8 @@ export const EachTrainInfo = (props) => {
   const [nearTrainIDList, setNearTrainIDList] = useState([]);
   const [showNearTrain, setShowNearTrain] = useState([]);
   const [isConcatNear, setIsConcatNear] = useState(false);
+  const [tailStation, setTailStation] = useState();
+  const [headStation, setHeadStation] = useState();
 
   //裏列車探索
   useEffect(() => {
@@ -85,10 +87,22 @@ export const EachTrainInfo = (props) => {
     const TDArray = TD.split("#").filter((d) => d != "");
     setShowNearTrain(TDArray);
   }, [data]);
+  useEffect(() => {
+    if (trainData.length == 0) return;
+    showNearTrain.forEach((d) => {
+      const [station, se, time] = d.split(",");
+
+      console.log(trainData); //trainDataは現在の列車の停車駅リスト
+      console.log(station); //showNearTrainは裏列車の停車駅リスト
+      console.log(trainData[0]);
+      if (station == trainData[0].split(",")[0])
+        setHeadStation(trainData[0].split(",")[0]);
+      if (station == trainData[trainData.length - 1].split(",")[0])
+        setTailStation(trainData[trainData.length - 1].split(",")[0]);
+    });
+  }, [trainData, showNearTrain]);
 
   const openBackTrainInfo = (stationInfo, currentTrainIndex) => {
-    console.log(trainData); //trainDataは現在の列車の停車駅リスト
-    console.log(showNearTrain); //showNearTrainは裏列車の停車駅リスト
     const mainTrainStationPosition = trainData.findIndex(
       (d) => d.split(",")[0] == stationInfo
     );
@@ -98,7 +112,6 @@ export const EachTrainInfo = (props) => {
         : mainTrainStationPosition == trainData.length - 1
         ? "tail"
         : "middle";
-    console.log(relationMain);
 
     const subTrainStationPosition = showNearTrain.findIndex(
       (d) => d.split(",")[0] == stationInfo
@@ -109,7 +122,6 @@ export const EachTrainInfo = (props) => {
         : subTrainStationPosition == showNearTrain.length - 1
         ? "tail"
         : "middle";
-    console.log(relationSub);
     switch (relationMain) {
       case "head":
         if (relationSub == "head") {
@@ -622,6 +634,13 @@ export const EachTrainInfo = (props) => {
             backgroundColor: "white",
           }}
         >
+          {headStation && !isConcatNear && (
+            <TouchableOpacity onPress={() => openBackTrainInfo(headStation)}>
+              <View>
+                <Text>直通列車を表示</Text>
+              </View>
+            </TouchableOpacity>
+          )}
           {/* <LottieView
                 autoPlay
                 loop
@@ -630,7 +649,10 @@ export const EachTrainInfo = (props) => {
               />
               <Text>ほげほげふがふが</Text> */}
 
-          {trainData.map((i, index) => (i.split(",")[1] == "提" ? <DataFromButton i={i} /> :
+          {trainData.map((i, index) =>
+            i.split(",")[1] == "提" ? (
+              <DataFromButton i={i} />
+            ) : (
               <StationButton
                 i={i}
                 index={index}
@@ -642,7 +664,15 @@ export const EachTrainInfo = (props) => {
                 openBackTrainInfo={openBackTrainInfo}
                 isConcatNear={isConcatNear}
               />
-          ))}
+            )
+          )}
+          {tailStation && !isConcatNear && (
+            <TouchableOpacity onPress={() => openBackTrainInfo(tailStation)}>
+              <View>
+                <Text>直通列車を表示</Text>
+              </View>
+            </TouchableOpacity>
+          )}
 
           <View style={{ flexDirection: "row" }}>
             <View
@@ -684,14 +714,18 @@ const DataFromButton  = ({i}) => {
           <Text style={{ fontSize: 20 }}>{station}</Text>
           <View style={{ flex: 1 }} />
           <Text style={{ fontSize: 18 }}>
-            提供元<MaterialCommunityIcons name={"open-in-new"} color="black" size={20} />
+            提供元
+            <MaterialCommunityIcons
+              name={"open-in-new"}
+              color="black"
+              size={20}
+            />
           </Text>
-          
         </View>
       </View>
     </TouchableWithoutFeedback>
   );
-}
+};
 
 const StationButton = ({
   i,
@@ -744,22 +778,6 @@ const StationButton = ({
   );
   const swipagleRef = useRef(null);
   return (
-    <Swipeable
-      ref={swipagleRef}
-      key={station}
-      onSwipeableOpen={() => {
-        openBackTrainInfo(station, index);
-        swipagleRef.current.close();
-      }}
-      renderRightActions={
-        isConnected && !isConcatNear
-          ? (progress, dragX) => {
-              //openBackTrainInfo(station, index);
-              return <View style={{ flex: 1, backgroundColor: "red" }}></View>;
-            }
-          : null
-      }
-    >
     <TouchableWithoutFeedback
       onPress={() => openStationACFromEachTrainInfo(station)}
       key={station}
@@ -805,9 +823,6 @@ const StationButton = ({
             flexDirection: "row",
             borderBottomWidth: 1,
             borderBottomColor: "#f0f0f0",
-              borderRightColor: isConnected && !isConcatNear ? "red" : "white",
-              borderRightWidth: 10,
-              paddingRight: 10,
             flex: 1,
           }}
         >
@@ -816,8 +831,7 @@ const StationButton = ({
           {points && points.findIndex((d) => d == index) >= 0 ? (
             <Text style={{ fontSize: 20, marginRight: 70 }}>🚊</Text>
           ) : null}
-            {!isNaN(currentTrainData?.delay) &&
-              currentTrainData?.delay != 0 && (
+          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
             <Text
               style={{
                 fontSize: 15,
@@ -851,7 +865,6 @@ const StationButton = ({
         </View>
       </View>
     </TouchableWithoutFeedback>
-    </Swipeable>
   );
 };