とりあえずこれでビルド

components/ActionSheetComponents/EachTrainInfo.js

@@ -6,9 +6,13 @@ import {
   TouchableOpacity,
   Platform,
   StyleSheet,
+  useWindowDimensions,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import ActionSheet, { SheetManager } from "react-native-actions-sheet";
+import ActionSheet, {
+  SheetManager,
+  useScrollHandlers,
+} from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
 import trainList from "../../assets/originData/trainList";
 import { lineList } from "../../lib/getStationList";
@@ -24,6 +28,7 @@ import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
 import { LongHeader } from "./EachTrainInfo/LongHeader";
 import { ShortHeader } from "./EachTrainInfo/ShortHeader";
 import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
+import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";
 
 export const EachTrainInfo = (props) => {
   if (!props.payload) return <></>;
@@ -47,6 +52,16 @@ export const EachTrainInfo = (props) => {
   const [isConcatNear, setIsConcatNear] = useState(false);
   const [tailStation, setTailStation] = useState();
   const [headStation, setHeadStation] = useState();
+  const { height, width } = useWindowDimensions();
+  const [isLandscape, setIsLandscape] = useState(false);
+  useEffect(() => {
+    if (height / width > 1.5) {
+      setIsLandscape(false);
+    }
+    if (height / width < 1.5) {
+      setIsLandscape(true);
+    }
+  }, [width, height]);
   // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
 
   //裏列車探索
@@ -376,6 +391,7 @@ export const EachTrainInfo = (props) => {
       .replace("ライナーライナー", "ライナー");
   };
   const actionSheetRef = useRef(null);
+  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
   return (
     <ActionSheet
       gestureEnabled={true}
@@ -384,6 +400,7 @@ export const EachTrainInfo = (props) => {
       ref={actionSheetRef}
       drawUnderStatusBar={false}
       isModal={Platform.OS == "ios"}
+
       //useBottomSafeAreaPadding={Platform.OS == "android"}
     >
       <View
@@ -445,60 +462,46 @@ export const EachTrainInfo = (props) => {
               />
             )}
         </View>
-        <DynamicHeaderScrollView
-          styles={styles}
-          containerProps={{ style: { maxHeight: heightPercentageToDP("70%") } }}
-          Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
-          Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
-          shortHeader={
-            from == "AllTrainDiagramView" ? (
-              <></>
-            ) : (
-              <ShortHeader
-                currentTrainData={currentTrainData}
-                currentPosition={currentPosition}
-                nearTrainIDList={nearTrainIDList}
-                openTrainInfo={openTrainInfo}
-              />
-            )
-          }
-          longHeader={
-            from == "AllTrainDiagramView" ? (
-              <></>
-            ) : (
-              <LongHeader
-                currentTrainData={currentTrainData}
-                currentPosition={currentPosition}
-                nearTrainIDList={nearTrainIDList}
-                openTrainInfo={openTrainInfo}
-              />
-            )
-          }
-          topStickyContent={
-            <ScrollStickyContent currentTrainData={currentTrainData} />
-          }
-        >
-          {headStation && !isConcatNear && (
-            <TouchableOpacity
-              onPress={() => openBackTrainInfo(headStation)}
-              style={{
-                padding: 10,
-                flexDirection: "row",
-                borderColor: "blue",
-                borderWidth: 1,
-                margin: 10,
-                borderRadius: 5,
-                alignItems: "center",
-              }}
-            >
-              <Text
-                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+        {isLandscape ? (
+          <LandscapeTrainInfo
+            scrollHandlers={scrollHandlers}
+            leftContent={
+              from == "AllTrainDiagramView" ? (
+                <></>
+              ) : (
+                <LongHeader
+                  currentTrainData={currentTrainData}
+                  currentPosition={currentPosition}
+                  nearTrainIDList={nearTrainIDList}
+                  openTrainInfo={openTrainInfo}
+                />
+              )
+            }
+            topStickyContent={
+              <ScrollStickyContent currentTrainData={currentTrainData} />
+            }
+          >
+            {headStation && !isConcatNear && (
+              <TouchableOpacity
+                onPress={() => openBackTrainInfo(headStation)}
+                style={{
+                  padding: 10,
+                  flexDirection: "row",
+                  borderColor: "blue",
+                  borderWidth: 1,
+                  margin: 10,
+                  borderRadius: 5,
+                  alignItems: "center",
+                }}
               >
-                「本当の始発駅」を表示
-              </Text>
-            </TouchableOpacity>
-          )}
-          {/* <LottieView
+                <Text
+                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+                >
+                  「本当の始発駅」を表示
+                </Text>
+              </TouchableOpacity>
+            )}
+            {/* <LottieView
                 autoPlay
                 loop
                 style={{ width: 150, height: 150, backgroundColor: "#fff" }}
@@ -506,56 +509,175 @@ export const EachTrainInfo = (props) => {
               />
               <Text>ほげほげふがふが</Text> */}
 
-          {trainData.map((i, index) =>
-            i.split(",")[1] == "提" ? (
-              <DataFromButton i={i} />
-            ) : (
-              <EachStopList
-                i={i}
-                index={index}
-                stationList={stationList}
-                points={points}
-                currentTrainData={currentTrainData}
-                openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
-              />
-            )
-          )}
-          {tailStation && !isConcatNear && (
-            <TouchableOpacity
-              onPress={() => openBackTrainInfo(tailStation)}
-              style={{
-                padding: 10,
-                flexDirection: "row",
-                borderColor: "blue",
-                borderWidth: 1,
-                margin: 10,
-                borderRadius: 5,
-                alignItems: "center",
-              }}
-            >
-              <Text
-                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+            {trainData.map((i, index) =>
+              i.split(",")[1] == "提" ? (
+                <DataFromButton i={i} />
+              ) : (
+                <EachStopList
+                  i={i}
+                  index={index}
+                  stationList={stationList}
+                  points={points}
+                  currentTrainData={currentTrainData}
+                  openStationACFromEachTrainInfo={
+                    openStationACFromEachTrainInfo
+                  }
+                />
+              )
+            )}
+            {tailStation && !isConcatNear && (
+              <TouchableOpacity
+                onPress={() => openBackTrainInfo(tailStation)}
+                style={{
+                  padding: 10,
+                  flexDirection: "row",
+                  borderColor: "blue",
+                  borderWidth: 1,
+                  margin: 10,
+                  borderRadius: 5,
+                  alignItems: "center",
+                }}
               >
-                「本当の終着駅」を表示
-              </Text>
-            </TouchableOpacity>
-          )}
+                <Text
+                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+                >
+                  「本当の終着駅」を表示
+                </Text>
+              </TouchableOpacity>
+            )}
 
-          <View style={{ flexDirection: "row" }}>
-            <View
-              style={{
-                padding: 8,
-                flexDirection: "row",
-                borderBottomWidth: 1,
-                borderBottomColor: "#f0f0f0",
-                flex: 1,
-              }}
-            >
-              <Text style={{ fontSize: 20 }}> </Text>
-              <View style={{ flex: 1 }} />
+            <View style={{ flexDirection: "row" }}>
+              <View
+                style={{
+                  padding: 8,
+                  flexDirection: "row",
+                  borderBottomWidth: 1,
+                  borderBottomColor: "#f0f0f0",
+                  flex: 1,
+                }}
+              >
+                <Text style={{ fontSize: 20 }}> </Text>
+                <View style={{ flex: 1 }} />
+              </View>
             </View>
-          </View>
-        </DynamicHeaderScrollView>
+          </LandscapeTrainInfo>
+        ) : (
+          <DynamicHeaderScrollView
+            styles={styles}
+            containerProps={{
+              style: { maxHeight: heightPercentageToDP("70%") },
+            }}
+            Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
+            Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
+            shortHeader={
+              from == "AllTrainDiagramView" ? (
+                <></>
+              ) : (
+                <ShortHeader
+                  currentTrainData={currentTrainData}
+                  currentPosition={currentPosition}
+                  nearTrainIDList={nearTrainIDList}
+                  openTrainInfo={openTrainInfo}
+                />
+              )
+            }
+            longHeader={
+              from == "AllTrainDiagramView" ? (
+                <></>
+              ) : (
+                <LongHeader
+                  currentTrainData={currentTrainData}
+                  currentPosition={currentPosition}
+                  nearTrainIDList={nearTrainIDList}
+                  openTrainInfo={openTrainInfo}
+                />
+              )
+            }
+            topStickyContent={
+              <ScrollStickyContent currentTrainData={currentTrainData} />
+            }
+          >
+            {headStation && !isConcatNear && (
+              <TouchableOpacity
+                onPress={() => openBackTrainInfo(headStation)}
+                style={{
+                  padding: 10,
+                  flexDirection: "row",
+                  borderColor: "blue",
+                  borderWidth: 1,
+                  margin: 10,
+                  borderRadius: 5,
+                  alignItems: "center",
+                }}
+              >
+                <Text
+                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+                >
+                  「本当の始発駅」を表示
+                </Text>
+              </TouchableOpacity>
+            )}
+            {/* <LottieView
+                autoPlay
+                loop
+                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                source={require("../../assets/51690-loading-diamonds.json")}
+              />
+              <Text>ほげほげふがふが</Text> */}
+
+            {trainData.map((i, index) =>
+              i.split(",")[1] == "提" ? (
+                <DataFromButton i={i} />
+              ) : (
+                <EachStopList
+                  i={i}
+                  index={index}
+                  stationList={stationList}
+                  points={points}
+                  currentTrainData={currentTrainData}
+                  openStationACFromEachTrainInfo={
+                    openStationACFromEachTrainInfo
+                  }
+                />
+              )
+            )}
+            {tailStation && !isConcatNear && (
+              <TouchableOpacity
+                onPress={() => openBackTrainInfo(tailStation)}
+                style={{
+                  padding: 10,
+                  flexDirection: "row",
+                  borderColor: "blue",
+                  borderWidth: 1,
+                  margin: 10,
+                  borderRadius: 5,
+                  alignItems: "center",
+                }}
+              >
+                <Text
+                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+                >
+                  「本当の終着駅」を表示
+                </Text>
+              </TouchableOpacity>
+            )}
+
+            <View style={{ flexDirection: "row" }}>
+              <View
+                style={{
+                  padding: 8,
+                  flexDirection: "row",
+                  borderBottomWidth: 1,
+                  borderBottomColor: "#f0f0f0",
+                  flex: 1,
+                }}
+              >
+                <Text style={{ fontSize: 20 }}> </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            </View>
+          </DynamicHeaderScrollView>
+        )}
       </View>
     </ActionSheet>
   );