diff --git a/components/DynamicHeaderScrollView.js b/components/DynamicHeaderScrollView.js index 106e95a..a381887 100644 --- a/components/DynamicHeaderScrollView.js +++ b/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 ( {shortHeader} @@ -57,13 +65,7 @@ export const DynamicHeaderScrollView = (props) => { {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); + }} > - 内部バージョン: 5.0 + 内部バージョン: 5.0.1 diff --git a/menu.js b/menu.js index 65a700f..b5305e2 100644 --- a/menu.js +++ b/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) { - {originalStationList && allStationData.length != 0 && ( + {originalStationList.length != 0 && allStationData.length != 0 && ( )} {allStationData.length != 0 && - originalStationList && + originalStationList.length != 0 && allStationData[selectedCurrentStation] && (