React Native（Android）如何基于FlatList实现可折叠动画头部？

针对Android平台，基于FlatList实现滚动时头部从初始高度平滑过渡到最小高度并固定在顶部的动画，核心是利用React Native的Animated库监听滚动偏移，动态计算头部的样式属性。下面是具体实现步骤和代码示例：

核心思路 #

通过监听FlatList的滚动偏移量，使用Animated.interpolate将滚动值映射为头部的高度变化和位移值：

• 当滚动偏移小于「初始高度-最小高度」时，头部高度随滚动逐渐缩小，同时保持顶部对齐
• 当滚动偏移超过该阈值后，头部固定在屏幕顶部，高度保持最小

实现步骤 #

1. 初始化动画变量与常量 #

定义头部的初始高度、最小高度，创建保存滚动偏移的Animated.Value：

import React, { useRef } from 'react';
import { View, FlatList, Animated, Text, StyleSheet } from 'react-native';

const HEADER_INITIAL_HEIGHT = 200;
const HEADER_MIN_HEIGHT = 60;
const SCROLL_THRESHOLD = HEADER_INITIAL_HEIGHT - HEADER_MIN_HEIGHT;

2. 创建滚动监听与动画映射 #

使用useRef保存Animated.Value，并通过Animated.event绑定FlatList的滚动事件，计算头部的动态样式：

const ScrollHeaderFlatList = () => {
  const scrollY = useRef(new Animated.Value(0)).current;

  // 计算头部高度：从初始高度过渡到最小高度
  const headerHeight = scrollY.interpolate({
    inputRange: [0, SCROLL_THRESHOLD],
    outputRange: [HEADER_INITIAL_HEIGHT, HEADER_MIN_HEIGHT],
    extrapolateRight: 'clamp', // 超过阈值后保持最小高度
  });

  // 计算头部位移：滚动超过阈值后固定在顶部
  const headerTranslateY = scrollY.interpolate({
    inputRange: [0, SCROLL_THRESHOLD],
    outputRange: [0, SCROLL_THRESHOLD - HEADER_INITIAL_HEIGHT],
    extrapolateRight: 'clamp',
  });

  // 模拟列表数据
  const data = Array.from({ length: 50 }, (_, i) => `列表项 ${i + 1}`);

  const renderItem = ({ item }) => (
    <View style={styles.listItem}>
      <Text>{item}</Text>
    </View>
  );

3. 配置FlatList与渲染动态头部 #

给FlatList设置onScroll事件（Android需指定scrollEventThrottle: 16保证动画流畅），并将头部用Animated.View包裹，应用动态样式：

return (
    <View style={styles.container}>
      {/* 动态头部 */}
      <Animated.View
        style={[
          styles.header,
          {
            height: headerHeight,
            transform: [{ translateY: headerTranslateY }],
          },
        ]}
      >
        <Text style={styles.headerText}>动态收缩头部</Text>
      </Animated.View>

      {/* FlatList列表 */}
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item}
        // 绑定滚动事件到动画变量
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
          { useNativeDriver: true } // 启用原生驱动提升Android性能
        )}
        // Android平台设置scrollEventThrottle保证60fps流畅度
        scrollEventThrottle={16}
        // 给列表添加顶部内边距，避免头部遮挡列表项
        contentContainerStyle={{ paddingTop: HEADER_INITIAL_HEIGHT }}
        // Android关闭弹性滚动，避免过度滚动影响动画
        overScrollMode="never"
      />
    </View>
  );
};

4. 添加样式 #

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: '#2196F3',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 10,
  },
  headerText: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
  },
  listItem: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
});

export default ScrollHeaderFlatList;

关键注意点（Android专属） #

• scrollEventThrottle: 16：Android平台需要设置该值，保证滚动事件每秒触发60次，让动画更平滑
• useNativeDriver: true：启用原生动画驱动，避免JS线程阻塞导致的卡顿
• overScrollMode: "never"：关闭Android的弹性滚动效果，防止过度滚动时头部出现异常位移

内容的提问来源于stack exchange，提问作者SarahAlexa