如何在React Native中制作一个高度可以随动画变化的FlatList？

Question

标题出现在用户开始滚动列表之前，并且当用户开始滚动列表时 FlatList 会填充整个屏幕。动画必须一步完成过渡。当用户不断滚动时不会。我不知道此类列表的名称。 Instagram 和 YouTube 的评论类似。我准备了视觉效果来更好地解释。我怎样才能制作这种类型的列表？

Answer 1

我使用 Animated.View 来实现这一点。我有 2 个标头，第一个标头位于 ListHeaderComponent FlatList 参数内，而这个动画标头则隐藏。当用户向下滚动 ListHeaderComponent 隐藏时，当用户向上滚动时，我显示动画。

这里有动画视图：

   <Animated.View>
    {!fullSearcher && (
      <View>
        //whatever you want inside header
      </View>
    )}
  </Animated.View>

这里有管理这个动画视图的代码：

 const [fullSearcher, setFullSearcher] = useState(true);
 const handleScroll = (event: any) => {
   const windowHeight = Dimensions.get('window').height;
   const scrollHeight: number = event.nativeEvent.contentOffset.y;
   if (scrollHeight <= 400 && !fullSearcher) {
    setFullSearcher(true);
   } else if (scrollHeight > windowHeight && fullSearcher) {
    setFullSearcher(false);
   }
 };

然后在 FlatList onScroll 参数中：

onScroll={Animated.event(
  [{nativeEvent: {contentOffset: {y: scrollOffsetY}}}],
  {
    useNativeDriver: false,
    listener: event => handleScroll(event),
  },
)}

希望这有帮助！