React-Native实现FlatList滚动时隐藏头部、停止滚动显示头部方案咨询

你要实现的效果可以通过React Native自带的Animated动画库配合FlatList的滚动回调实现，不需要额外依赖，具体逻辑如下：

• 初始化两个动画变量：一个用于存储FlatList的垂直滚动偏移量，另一个用于控制自定义头部的透明度/位移
• 绑定FlatList的滚动事件，将滚动偏移实时同步到动画变量
• 监听滚动开始和滚动结束事件，分别触发头部隐藏和显示的动画

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

const App = () => {
  // 滚动偏移存储变量
  const scrollY = useRef(new Animated.Value(0)).current;
  // 头部透明度控制变量
  const headerOpacity = useRef(new Animated.Value(1)).current;

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

  // 滚动开始时隐藏头部
  const handleScrollBegin = () => {
    Animated.timing(headerOpacity, {
      toValue: 0,
      duration: 200,
      useNativeDriver: true,
    }).start();
  };

  // 滚动结束时显示头部
  const handleScrollEnd = () => {
    Animated.timing(headerOpacity, {
      toValue: 1,
      duration: 200,
      useNativeDriver: true,
    }).start();
  };

  // 自定义头部组件
  const renderHeader = () => {
    return (
      <Animated.View style={[styles.header, {opacity: headerOpacity}]}>
        <Text style={styles.headerText}>自定义头部</Text>
      </Animated.View>
    );
  };

  // 列表项渲染
  const renderItem = ({item}) => {
    return (
      <View style={styles.item}>
        <Text>{item.title}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()}
        ListHeaderComponent={renderHeader}
        onScroll={Animated.event(
          [{nativeEvent: {contentOffset: {y: scrollY}}}],
          {useNativeDriver: true}
        )}
        onScrollBeginDrag={handleScrollBegin}
        onMomentumScrollEnd={handleScrollEnd}
        scrollEventThrottle={16}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    height: 80,
    backgroundColor: '#2196F3',
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
  item: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
});

export default App;

如果你需要头部是向上收起隐藏而非渐变消失，只需要把头部的动画属性从opacity换成transform的位移属性即可，动画逻辑完全一致，示例：transform: [{translateY: headerOpacity.interpolate({inputRange: [0,1], outputRange: [-80, 0]})}]

如果需要更复杂的动效（比如头部随滚动平滑上移、粘性停留等），可以直接使用封装好的库：

• react-native-sticky-header-flatlist：专门适配FlatList的头部动效组件，支持动态显隐、粘性停留等配置，只需传入自定义头部和数据源即可使用
• react-native-parallax-scroll-view：支持视差滚动、头部显隐等多种滚动动效，适配FlatList、ScrollView等多种滚动组件

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