harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

妙な挙動していたのを修正

Browse Source
This commit is contained in:
harukin-expo-dev-env 2024-03-12 14:24:43 +00:00
parent c0cdad3683
commit b2baf84e24
1 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
components/DynamicHeaderScrollView.js
View File

@ -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={{