隐藏 header 基于滚动增量而不是滚动位置

Question

如何使用 react native flat list 从头到尾进行滚动更改，并根据下面的示例更改 header 的高度

example-screenshot

例如

const delta = end_scroll_pos - start_scroll_pos; // for example delta = 60

例如滚动位置 220 和 280 之间的增量 60

Answer 1

我最近开发了一个新软件包，react-native-animated-screen，它正是您所需要的

看看

https://www.npmjs.com/package/react-native-animated-screen

import  React  from  'react';
import { Image, Text, View } from  'react-native';
import AnimatedScreen from  'react-native-animated-screen';

const  Component = () => {
   const animationStart = 90; 
   const animationEnd = 300; // the header will be totally collapsed by screen scrolled 300
   return (
     <AnimatedScreen.Wrapper>
       <AnimatedScreen.Header headerMinHeight={animationStart} headerMaxHeight={animationEnd}>
         <View>
           <Text>Title</Text>
           <AnimatedScreen.CollapsibleElement>
             <Text>Subtitle</Text>
           </AnimatedScreen.CollapsibleElement>
         </View>
       </AnimatedScreen.Header>
       <AnimatedScreen.ScrollView>
         <View  style={{ height: '300%' }}>
           <View>
             <Text>Body</Text>
           </View>
         </View>
       </AnimatedScreen.ScrollView>
     </AnimatedScreen.Wrapper>
   );
};

在上面的示例中，只有标题会在滚动后保留，副标题（所有元素都包裹在 CollapsibleElement 中）将消失。您可以使用 AnimatedHeader 包装器组件的两个参数 headerMinHeight 和 headerMaxHeight 来准确定义动画应该在多少滚动之后开始和完成

隐藏 header 基于滚动增量而不是滚动位置

hide header base on scroll delta not scroll position

react-native

react-native-scrollview

react-native-android

react-native-flatlist