横方向のアニメーションや要素の被りを修正

Apps.js

@@ -5,6 +5,7 @@ import {
   Text,
   TouchableOpacity,
   useWindowDimensions,
+  LayoutAnimation,
 } from "react-native";
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
@@ -19,6 +20,7 @@ import { useFavoriteStation } from "./stateBox/useFavoriteStation";
 import { useCurrentTrain } from "./stateBox/useCurrentTrain";
 import { SheetManager } from "react-native-actions-sheet";
 import TrainMenu from "./components/trainMenu";
+import { EachTrainInfoCore } from "./components/ActionSheetComponents/EachTrainInfoCore";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -186,6 +188,7 @@ export default function Apps({ navigation, webview, stationData }) {
       case "ShowTrainTimeInfo": {
         const { trainNum, limited } = dataSet;
         //alert(trainNum, limited);
+        LayoutAnimation.easeInEaseOut();
         setTrainInfo({
           trainNum,
           limited,
@@ -193,6 +196,7 @@ export default function Apps({ navigation, webview, stationData }) {
             currentTrain.filter((a) => a.num == trainNum)
           ),
         }); //遅延情報は未実装
+        if (isLandscape) return;
         const payload = {
           data: {
             trainNum,
@@ -294,7 +298,7 @@ export default function Apps({ navigation, webview, stationData }) {
       }}
       onLayout={handleLayout}
     >
-      {isLandscape ? (
+      {!trainInfo.trainData && isLandscape ? (
         <TrainMenu
           webview={webview}
           stationData={stationData}
@@ -343,6 +347,25 @@ export default function Apps({ navigation, webview, stationData }) {
           }
         }}
       />
+      {isLandscape && trainInfo.trainData && (
+        <View
+          style={{
+            width: (width / 100) * 40,
+            height: height,
+            flexDirection: "column",
+          }}
+        >
+          <EachTrainInfoCore
+            {...{
+              data: trainInfo.trainData ? trainInfo : undefined,
+              navigate,
+              originalStationList,
+              openStationACFromEachTrainInfo,
+              from: "Train",
+            }}
+          />
+        </View>
+      )}
       {isLandscape || (
         <MapsButton
           onPress={() => navigate("trainMenu", { webview })}
@@ -350,9 +373,23 @@ export default function Apps({ navigation, webview, stationData }) {
           mapSwitch={mapSwitch == "true" ? "flex" : "none"}
         />
       )}
+      {isLandscape && trainInfo.trainData && (
+        <LandscapeBackButton
+          onPress={() => {
+            LayoutAnimation.easeInEaseOut();
+            setTrainInfo({
+              trainNum: undefined,
+              limited: undefined,
+              trainData: undefined,
+            });
+          }}
+          top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+        />
+      )}
       <ReloadButton
         onPress={() => webview.current.reload()}
         top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
+        right={isLandscape && trainInfo.trainData ? (width / 100) * 40 : 0}
         LoadError={LoadError}
       />
     </View>
@@ -395,12 +432,54 @@ const MapsButton = ({ onPress, top, mapSwitch }) => {
   );
 };
 
-const ReloadButton = ({ onPress, top, mapSwitch, LoadError = false }) => {
+const LandscapeBackButton = ({ onPress, top }) => {
   const styles = {
     touch: {
       position: "absolute",
       top,
-      right: 10,
+      left: 10,
+      width: 50,
+      height: 50,
+      backgroundColor: "#0099CC",
+      borderColor: "white",
+      borderStyle: "solid",
+      borderWidth: 1,
+      borderRadius: 50,
+      alignContent: "center",
+      alignSelf: "center",
+      alignItems: "center",
+      display: "flex",
+    },
+    text: {
+      textAlign: "center",
+      width: "auto",
+      height: "auto",
+      textAlignVertical: "center",
+      fontWeight: "bold",
+      color: "white",
+    },
+  };
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.touch}>
+      <View style={{ flex: 1 }} />
+      <Ionicons name="arrow-back" color="white" size={30} />
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};
+
+const ReloadButton = ({
+  onPress,
+  top,
+  mapSwitch,
+  LoadError = false,
+  right,
+}) => {
+  const styles = {
+    touch: {
+      position: "absolute",
+      top,
+      right: 10 + right,
       width: 50,
       height: 50,
       backgroundColor: LoadError ? "red" : "#0099CC",

components/ActionSheetComponents/EachTrainInfo/TrainDataView.js

@@ -35,7 +35,7 @@ export const TrainDataView = ({
         flexDirection: "row",
         //minHeight: 200,
         //height: heightPercentageToDP("20%"),
-        width: isLandscape ? width / 2 : width,
+        width: isLandscape ? (width / 100) * 40 : width,
         flex: 1,
       }}
     >

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -52,7 +52,7 @@ export const EachTrainInfoCore = ({
         currentTrain.filter((d) => d.num == data.trainNum)
       )
     );
-  }, [currentTrain]);
+  }, [currentTrain, data.trainNum]);
 
   //bconst insets = useSafeAreaInsets();
 
@@ -232,7 +232,9 @@ export const EachTrainInfoCore = ({
     setNearTrainIDList(returnArray);
     setShowNearTrain(TDArray);
   }, [data]);
-  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
+  const scrollHandlers = actionSheetRef
+    ? useScrollHandlers("scrollview-1", actionSheetRef)
+    : null;
   const migrateTrainName = (string) => {
     return string
       .replace("マリン", "マリンライナー")
@@ -401,18 +403,20 @@ export const EachTrainInfoCore = ({
         borderWidth: 1,
       }}
     >
-      <View style={{ height: 26, width: "100%" }}>
-        <View
-          style={{
-            height: 6,
-            width: 45,
-            borderRadius: 100,
-            backgroundColor: "#f0f0f0",
-            marginVertical: 10,
-            alignSelf: "center",
-          }}
-        />
-      </View>
+      {isLandscape || (
+        <View style={{ height: 26, width: "100%" }}>
+          <View
+            style={{
+              height: 6,
+              width: 45,
+              borderRadius: 100,
+              backgroundColor: "#f0f0f0",
+              marginVertical: 10,
+              alignSelf: "center",
+            }}
+          />
+        </View>
+      )}
       <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
         <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
           {data.limited
@@ -450,7 +454,8 @@ export const EachTrainInfoCore = ({
             />
           )}
       </View>
-      {isLandscape ? (
+      {/* {isLandscape  */}
+      {false ? (
         <LandscapeTrainInfo
           scrollHandlers={scrollHandlers}
           leftContent={
@@ -552,7 +557,11 @@ export const EachTrainInfoCore = ({
           styles={styles}
           scrollViewProps={scrollHandlers}
           containerProps={{
-            style: { maxHeight: heightPercentageToDP("70%") },
+            style: {
+              maxHeight: isLandscape
+                ? height - 94
+                : heightPercentageToDP("70%"),
+            },
           }}
           Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
           Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}