Merge commit '75952f4edea5d59554322a5c611483a0052e4e97' into develop

components/DynamicHeaderScrollView.js

@@ -1,5 +1,5 @@
-import { ScrollView, View, Animated, Platform } from "react-native";
-import React, { useRef } from "react";
+import { ScrollView, View, Animated, LayoutAnimation } from "react-native";
+import React, { useState } from "react";
 
 export const DynamicHeaderScrollView = (props) => {
   const {
@@ -13,43 +13,51 @@ export const DynamicHeaderScrollView = (props) => {
     topStickyContent,
     styles,
   } = props;
-  const scrollOffsetY = useRef(new Animated.Value(0)).current;
 
   const Scroll_Distance = Max_Header_Height - Min_Header_Height;
 
-  const animatedHeaderHeight = scrollOffsetY.interpolate({
-    inputRange: [Scroll_Distance, Scroll_Distance + 30],
-    outputRange: [Max_Header_Height, 0],
-    extrapolate: "clamp",
-  });
-  const animatedHeaderHeight2 = scrollOffsetY.interpolate({
-    inputRange: [Scroll_Distance, Scroll_Distance + 30],
-    outputRange: [Max_Header_Height, Min_Header_Height],
-    extrapolate: "clamp",
-  });
-  const animatedHeaderVisible = scrollOffsetY.interpolate({
-    inputRange: [Scroll_Distance - 30, Scroll_Distance],
-    outputRange: [1, 0],
-    extrapolate: "clamp",
-  });
-  const animatedHeaderVisible2 = scrollOffsetY.interpolate({
-    inputRange: [Scroll_Distance - 30, Scroll_Distance + 30],
-    outputRange: [0, 1],
-    extrapolate: "clamp",
-  });
+  const [headerVisible, setHeaderVisible] = useState(false);
+  const shotHeaderStyle = {
+    on: {
+      height: Min_Header_Height,
+      backgroundColor: "#0099CC",
+      margin: 0,
+      top: 0,
+      opacity: 1,
+    },
+    off: {
+      height: Max_Header_Height,
+      backgroundColor: "#0099CC",
+      margin: 0,
+      top: 0,
+      opacity: 0,
+    },
+  };
+
+  const longHeaderStyle = {
+    on: {
+      height: Max_Header_Height,
+      backgroundColor: "#0099CC",
+      margin: 0,
+      top: 0,
+      opacity: 1,
+    },
+    off: {
+      height: 0,
+      backgroundColor: "#0099CC",
+      margin: 0,
+      top: 0,
+      opacity: 1,
+    },
+  };
+
   return (
     <View {...containerProps}>
       <View style={{ zIndex: 1 }}>
         <Animated.View
           style={[
             styles.header,
-            {
-              height: animatedHeaderHeight2,
-              backgroundColor: "#0099CC",
-              margin: 0,
-              top: 0,
-              opacity: animatedHeaderVisible2,
-            },
+            headerVisible ? shotHeaderStyle.on : shotHeaderStyle.off,
           ]}
         >
           {shortHeader}
@@ -57,13 +65,7 @@ export const DynamicHeaderScrollView = (props) => {
         <Animated.View
           style={[
             styles.header,
-            {
-              height: animatedHeaderHeight,
-              backgroundColor: "#0099CC",
-              opacity: animatedHeaderVisible,
-
-              top: 0,
-            },
+            headerVisible ? longHeaderStyle.off : longHeaderStyle.on,
           ]}
         >
           {longHeader}
@@ -77,10 +79,14 @@ export const DynamicHeaderScrollView = (props) => {
         }}
         stickyHeaderIndices={[1]}
         scrollEventThrottle={16}
-        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
-          { useNativeDriver: false }
-        )}
+        onScroll={(event) => {
+          const scrollY = event.nativeEvent.contentOffset.y;
+          LayoutAnimation.configureNext({
+            duration: 100,
+            update: { type: "easeOut" },
+          });
+          setHeaderVisible(Scroll_Distance < scrollY);
+        }}
       >
         <View
           style={{

components/settings.js

@@ -174,7 +174,7 @@ export default function Setting(props) {
                 textAlignVertical: "center",
               }}
             >
-              内部バージョン: 5.0
+              内部バージョン: 5.0.1
             </Text>
             <View style={{ flex: 1 }} />
           </View>

menu.js

@@ -100,8 +100,8 @@ export default function Menu(props) {
 
   const [currentStation, setCurrentStation] = useState(undefined); //第三要素
 
-  const [originalStationList, setOriginalStationList] = useState(); // 第一要素
-  useLayoutEffect(() => getStationList().then(setOriginalStationList), []);
+  const [originalStationList, setOriginalStationList] = useState([]); // 第一要素
+  useEffect(() => getStationList().then(setOriginalStationList), []);
 
   const carouselRef = useRef();
   const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
@@ -184,7 +184,7 @@ export default function Menu(props) {
       <TitleBar />
       <ScrollView>
         <FixedContentTop navigate={navigate} />
-        {originalStationList && allStationData.length != 0 && (
+        {originalStationList.length != 0 && allStationData.length != 0 && (
           <Carousel
             ref={carouselRef}
             layout={"default"}
@@ -234,7 +234,7 @@ export default function Menu(props) {
           />
         )}
         {allStationData.length != 0 &&
-          originalStationList &&
+          originalStationList.length != 0 &&
           allStationData[selectedCurrentStation] && (
             <LED_vision
               station={