DynamicHeaderを分割

2024-02-11 20:22:32 +09:00
parent cb2562fe9c
commit 84c050e928
2 changed files with 302 additions and 148 deletions
--- a/components/DynamicHeaderScrollView.js
+++ b/components/DynamicHeaderScrollView.js
@@ -0,0 +1,105 @@
+import { ScrollView, View, Animated } from "react-native";
+import React, { useRef } from "react";
+
+export const DynamicHeaderScrollView = (props) => {
+  const {
+    Max_Header_Height = 200,
+    Min_Header_Height = 80,
+    children,
+    scrollViewProps = {},
+    containerProps = {},
+    shortHeader = <></>,
+    longHeader = <></>,
+    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: [Min_Header_Height, Scroll_Distance],
+    outputRange: [Max_Header_Height, 0],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderHeight2 = scrollOffsetY.interpolate({
+    inputRange: [0, Scroll_Distance],
+    outputRange: [Max_Header_Height, Min_Header_Height],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderVisible = scrollOffsetY.interpolate({
+    inputRange: [Min_Header_Height, Scroll_Distance],
+    outputRange: [1, 0],
+    extrapolate: "clamp",
+  });
+  const animatedHeaderVisible2 = scrollOffsetY.interpolate({
+    inputRange: [Min_Header_Height, Scroll_Distance],
+    outputRange: [0, 1],
+    extrapolate: "clamp",
+  });
+  return (
+    <View {...containerProps}>
+      <View style={{ position: "relative" }}>
+        <Animated.View
+          style={[
+            styles.header,
+            {
+              height: Max_Header_Height,
+              backgroundColor: "#0099CC",
+              opacity: animatedHeaderVisible,
+
+              top: 0,
+            },
+          ]}
+        >
+          {longHeader}
+        </Animated.View>
+        <Animated.View
+          style={[
+            styles.header,
+            {
+              height: animatedHeaderHeight2,
+              backgroundColor: "#0099CC",
+              margin: 0,
+              top: 0,
+              opacity: animatedHeaderVisible2,
+            },
+          ]}
+        >
+          {shortHeader}
+        </Animated.View>
+      </View>
+      <ScrollView
+        {...scrollViewProps}
+        style={{
+          backgroundColor: "white",
+        }}
+        stickyHeaderIndices={[1]}
+        scrollEventThrottle={16}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
+          { useNativeDriver: false }
+        )}
+      >
+        <View
+          style={{
+            height: Scroll_Distance,
+            flexDirection: "column",
+          }}
+        />
+        {topStickyContent && (
+          <View
+            style={{
+              paddingTop: Min_Header_Height,
+              flexDirection: "column",
+            }}
+            index={1}
+          >
+            {topStickyContent}
+          </View>
+        )}
+        {children}
+      </ScrollView>
+    </View>
+  );
+};