ヘッダーサイズを固定できるように

components/DynamicHeaderScrollView.js

@@ -1,6 +1,7 @@
 import { ScrollView, View, Animated, LayoutAnimation } from "react-native";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState, useLayoutEffect } from "react";
 import { useScrollHandlers } from "react-native-actions-sheet";
+import { AS } from "../storageControl";
 
 export const DynamicHeaderScrollView = (props) => {
   const {
@@ -13,7 +14,30 @@ export const DynamicHeaderScrollView = (props) => {
     styles,
     from,
   } = props;
-
+  const [headerSize, setHeaderSize] = useState("default");
+  useLayoutEffect(() => {
+    AS.getItem("headerSize")
+      .then((res) => {
+        if (res) {
+          setHeaderSize(res);
+        }
+      })
+      .catch((e) => {
+        AS.setItem("headerSize", "default");
+      });
+  }, []);
+  useEffect(() => {
+    switch (headerSize) {
+      case "small":
+        setHeaderVisible(true);
+        return;
+      case "big":
+      case "default":
+      default:
+        setHeaderVisible(false);
+        break;
+    }
+  }, [headerSize]);
   const viewHeader = useMemo(() => {
     switch (from) {
       case "AllTrainDiagramView":
@@ -25,7 +49,7 @@ export const DynamicHeaderScrollView = (props) => {
     }
   }, [from]);
 
-  const Max_Header_Height = viewHeader ? 0 : 200;
+  const Max_Header_Height = headerSize == "small" ? 0 : viewHeader ? 0 : 200;
   const Min_Header_Height = viewHeader ? 0 : 80;
 
   const Scroll_Distance = Max_Header_Height - Min_Header_Height;
@@ -87,6 +111,15 @@ export const DynamicHeaderScrollView = (props) => {
   const [headerVisible, setHeaderVisible] = useState(false);
 
   const onScroll = (event) => {
+    switch (headerSize) {
+      case "big":
+        setHeaderVisible(false);
+        return;
+      case "small":
+        setHeaderVisible(true);
+        return;
+      case "default":
+      default:
         const scrollY = event.nativeEvent.contentOffset.y;
         if (Scroll_Distance < scrollY == headerVisible) return;
         LayoutAnimation.configureNext({
@@ -94,6 +127,8 @@ export const DynamicHeaderScrollView = (props) => {
           update: { type: "easeOut" },
         });
         setHeaderVisible(Scroll_Distance < scrollY);
+        break;
+    }
   };
 
   return (

components/Settings/LayoutSettings.js

@@ -2,6 +2,7 @@ import React from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
 import { SwitchArea } from "../atom/SwitchArea";
 import { CheckBox } from "react-native-elements";
+import { TripleSwitchArea } from "../atom/TripleSwitchArea";
 
 export const LayoutSettings = ({
   navigate,
@@ -17,6 +18,8 @@ export const LayoutSettings = ({
   setTrainMenu,
   trainPosition,
   setTrainPosition,
+  headerSize,
+  setHeaderSize,
 }) => {
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
@@ -106,12 +109,34 @@ export const LayoutSettings = ({
             trueImage={require("../../assets/configuration/train_original.jpg")}
           />
           {trainMenu == "true" && (
+            <>
+              <TripleSwitchArea
+                str={"ヘッダーサイズ"}
+                bool={headerSize}
+                setBool={setHeaderSize}
+                firstItem={{
+                  firstImage: require("../../assets/configuration/train_original_small.jpg"),
+                  firstText: "小固定",
+                  firstValue: "small",
+                }}
+                secondItem={{
+                  secondImage: require("../../assets/configuration/train_original.jpg"),
+                  secondText: "既定(可変)",
+                  secondValue: "default",
+                }}
+                thirdItem={{
+                  thirdImage: require("../../assets/configuration/train_original.jpg"),
+                  thirdText: "大固定",
+                  thirdValue: "big",
+                }}
+              />
               <SimpleSwitch
                 bool={trainPosition}
                 setBool={setTrainPosition}
                 color="red"
                 str="列車の現在位置をアイコン表示"
               />
+            </>
           )}
         </View>
       </ScrollView>

components/Settings/settings.js

@@ -32,6 +32,7 @@ export default function Setting(props) {
   const [usePDFView, setUsePDFView] = useState(false);
   const [trainMenu, setTrainMenu] = useState(false);
   const [trainPosition, setTrainPosition] = useState(false);
+  const [headerSize, setHeaderSize] = useState("default");
   useLayoutEffect(() => {
     AS.getItem("iconSwitch").then(setIconSetting);
     AS.getItem("mapSwitch").then(setMapSwitch);
@@ -39,6 +40,7 @@ export default function Setting(props) {
     AS.getItem("usePDFView").then(setUsePDFView);
     AS.getItem("trainSwitch").then(setTrainMenu);
     AS.getItem("trainPositionSwitch").then(setTrainPosition);
+    AS.getItem("headerSize").then(setHeaderSize);
   }, []);
   const testNFC = async () => {
     const result = await ExpoFelicaReader.scan();
@@ -52,6 +54,7 @@ export default function Setting(props) {
       AS.setItem("usePDFView", usePDFView.toString()),
       AS.setItem("trainSwitch", trainMenu.toString()),
       AS.setItem("trainPositionSwitch", trainPosition.toString()),
+      AS.setItem("headerSize", headerSize),
     ]).then(() => Updates.reloadAsync());
   };
   return (
@@ -115,6 +118,8 @@ export default function Setting(props) {
             setTrainPosition={setTrainPosition}
             testNFC={testNFC}
             updateAndReload={updateAndReload}
+            headerSize={headerSize}
+            setHeaderSize={setHeaderSize}
           />
         )}
       </Stack.Screen>

components/atom/TripleSwitchArea.js

@@ -0,0 +1,52 @@
+import { View, Text, Image, TouchableOpacity } from "react-native";
+import { SimpleSwitch } from "./SimpleSwitch";
+export const TripleSwitchArea = ({
+  str,
+  bool,
+  setBool,
+  firstItem: { firstImage, firstText, firstValue },
+  secondItem: { secondImage, secondText, secondValue },
+  thirdItem: { thirdImage, thirdText, thirdValue },
+}) => {
+  return (
+    <View style={{ flexDirection: "column", padding: 10 }}>
+      <Text
+        style={{
+          fontSize: 25,
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+        }}
+      >
+        {str}
+      </Text>
+      <View style={{ flexDirection: "row", padding: 10 }}>
+        <SimpleSwitch
+          bool={bool}
+          setBool={setBool}
+          color="red"
+          value={firstValue}
+          image={firstImage}
+          subText={firstText}
+        />
+        <SimpleSwitch
+          bool={bool}
+          setBool={setBool}
+          color="red"
+          value={secondValue}
+          image={secondImage}
+          subText={secondText}
+        />
+        <SimpleSwitch
+          bool={bool}
+          setBool={setBool}
+          color="red"
+          value={thirdValue}
+          image={thirdImage}
+          subText={thirdText}
+        />
+      </View>
+    </View>
+  );
+};