根据滚动增量隐藏标题而不是滚动位置答案

【问题标题】：hide header base on scroll delta not scroll position根据滚动增量隐藏标题而不是滚动位置
【发布时间】：2020-11-17 19:01:17
【问题描述】：

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

example-screenshot

例如

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

例如在滚动位置 220 和 280 delta 60 之间

【问题讨论】：

标签： react-native react-native-android react-native-flatlist react-native-scrollview

【解决方案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 来准确定义动画应该在多少滚动之后开始和完成

【讨论】：