Appsを横向き対応

Apps.js

@@ -1,8 +1,25 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, {
-import { View, Platform, Text, TouchableOpacity } from "react-native";
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useCallback,
+} from "react";
+import {
+  View,
+  Platform,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+} from "react-native";
 import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
 import { Ionicons } from "@expo/vector-icons";
+
+import {
+  widthPercentageToDP as wp,
+  heightPercentageToDP as hp,
+} from "react-native-responsive-screen";
 import { AS } from "./storageControl";
 import { news } from "./config/newsUpdate";
 import { getStationList, lineList } from "./lib/getStationList";
@@ -11,15 +28,30 @@ import { checkDuplicateTrainData } from "./lib/checkDuplicateTrainData";
 import { useFavoriteStation } from "./stateBox/useFavoriteStation";
 import { useCurrentTrain } from "./stateBox/useCurrentTrain";
 import { SheetManager } from "react-native-actions-sheet";
+import TrainMenu from "./components/trainMenu";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
 
 export default function Apps({ navigation, webview, stationData }) {
   const { currentTrain } = useCurrentTrain();
+  const { height, width } = useWindowDimensions();
   const { navigate } = navigation;
   var urlcache = "";
   const { favoriteStation } = useFavoriteStation();
+  const [isLandscape, setIsLandscape] = useState(false); //画面が横向きかどうか
+  const handleLayout = () => {};
+  useEffect(() => {
+    console.log("レイアウト変更");
+    console.log(height, width);
+    console.log(height / width);
+    if (height / width > 1.5) {
+      setIsLandscape(false);
+    }
+    if (height / width < 1.5) {
+      setIsLandscape(true);
+    }
+  }, [height, width]);
 
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);
@@ -271,8 +303,22 @@ export default function Apps({ navigation, webview, stationData }) {
       style={{
         height: "100%",
         paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+        flexDirection: isLandscape ? "row" : "column",
       }}
+      onLayout={handleLayout}
     >
+      {isLandscape ? (
+        <TrainMenu
+          webview={webview}
+          stationData={stationData}
+          navigation={{ navigate: null }}
+          style={{
+            width: wp("40%"),
+            height: "100%",
+            flexDirection: "column-reverse",
+          }}
+        />
+      ) : null}
       {/* {Status} */}
       <WebView
         useWebKit
@@ -310,11 +356,13 @@ export default function Apps({ navigation, webview, stationData }) {
           }
         }}
       />
+      {isLandscape || (
         <MapsButton
           onPress={() => navigate("trainMenu", { webview })}
           top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
           mapSwitch={mapSwitch == "true" ? "flex" : "none"}
         />
+      )}
       <ReloadButton
         onPress={() => webview.current.reload()}
         top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}

app.json

@@ -8,7 +8,7 @@
       "android"
     ],
     "version": "4.6",
-    "orientation": "portrait",
+    "orientation": "default",
     "icon": "./assets/icon.png",
     "splash": {
       "image": "./assets/splash.png",

components/trainMenu.js

@@ -6,10 +6,11 @@ export default function TrainMenu({
   navigation: { navigate },
   webview,
   stationData,
+  style,
 }) {
   const mapRef = useRef();
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+    <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
       <MapView
         style={{ flex: 1, width: "100%", height: "100%" }}
         showsUserLocation={true}
@@ -46,13 +47,14 @@ export default function TrainMenu({
                     webview.current?.injectJavaScript(
                       `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}')`
                     );
-                    navigate("Apps");
+                    if (navigate) navigate("Apps");
                   }}
                 ></Marker>
               );
             })
           )}
       </MapView>
+      {navigate && (
         <View style={{ flexDirection: "row" }}>
           <UsefulBox
             backgroundColor={"#F89038"}
@@ -84,9 +86,11 @@ export default function TrainMenu({
               )
             }
           >
-          この機能のフィードバック
+            フィードバック
           </UsefulBox>
         </View>
+      )}
+      {navigate && (
         <TouchableOpacity
           style={{
             padding: 10,
@@ -105,6 +109,7 @@ export default function TrainMenu({
           </Text>
           <View style={{ flex: 1 }} />
         </TouchableOpacity>
+      )}
     </View>
   );
 }
@@ -115,14 +120,14 @@ const UsefulBox = (props) => {
       style={{
         flex: flex,
         backgroundColor: backgroundColor,
-        padding: 10,
+        padding: 5,
         alignItems: "center",
         margin: 2,
       }}
       onPress={onPressButton}
     >
       <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
+      <Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
         {children}
       </Text>
     </TouchableOpacity>