首先，我注意到你代码里有个明显的笔误：onSroll应该是onScroll——这个小错误很可能是你拿不到滚动信息的直接原因！除此之外，在React Native 0.59.8中，要稳定获取FlatList的像素级滚动位置，还需要注意几个关键设置：

1. 修正回调名称并添加scrollEventThrottle #

FlatList的onScroll回调默认不会高频触发，你需要设置scrollEventThrottle属性来指定回调触发的频率（单位是毫秒），比如设置为16（对应约60帧/秒，适合做流畅的动画）。然后在回调中通过event.nativeEvent.contentOffset.y获取当前的垂直滚动位置。

示例代码：

import React, { useState } from 'react';
import { FlatList, View, Text } from 'react-native';

const MyComponent = () => {
  const [scrollY, setScrollY] = useState(0);

  const handleScroll = (event) => {
    const currentScrollY = event.nativeEvent.contentOffset.y;
    console.log('当前滚动位置：', currentScrollY);
    setScrollY(currentScrollY);
  };

  return (
    <View style={{ flex: 1 }}>
      {/* 这里可以放你要动画显示/隐藏的Header */}
      <FlatList
        data={Array(50).fill('列表项')}
        renderItem={({ item }) => <Text style={{ padding: 20 }}>{item}</Text>}
        keyExtractor={(item, index) => index.toString()}
        // 修正拼写错误 + 添加滚动频率控制
        onScroll={handleScroll}
        scrollEventThrottle={16}
      />
    </View>
  );
};

export default MyComponent;

2. 实现Header的显示/隐藏逻辑 #

要做随滚动显示/隐藏的Header，你需要记录上一次的滚动位置，通过对比当前和上一次的位置判断滚动方向：

• 当用户向下滚动（currentScrollY > lastScrollY）：隐藏Header
• 当用户向上滚动（currentScrollY < lastScrollY）：显示Header

可以结合Animated API来实现平滑动画，示例片段：

import { Animated } from 'react-native';

const MyComponent = () => {
  const headerHeight = 60;
  const scrollY = new Animated.Value(0);
  const lastScrollY = React.useRef(0);

  const handleScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollY } } }],
    {
      useNativeDriver: true,
      listener: (event) => {
        const currentScrollY = event.nativeEvent.contentOffset.y;
        // 判断滚动方向
        const isScrollingDown = currentScrollY > lastScrollY.current;
        lastScrollY.current = currentScrollY;
        console.log('滚动方向：', isScrollingDown ? '向下' : '向上');
      },
    }
  );

  // 计算Header的 translateY 值，实现隐藏/显示
  const headerTranslateY = scrollY.interpolate({
    inputRange: [0, headerHeight],
    outputRange: [0, -headerHeight],
    extrapolate: 'clamp',
  });

  return (
    <View style={{ flex: 1 }}>
      <Animated.View 
        style={{ 
          height: headerHeight, 
          backgroundColor: '#fff',
          transform: [{ translateY: headerTranslateY }],
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
        }}
      >
        <Text style={{ padding: 20 }}>可动画的Header</Text>
      </Animated.View>
      <FlatList
        data={Array(50).fill('列表项')}
        renderItem={({ item }) => <Text style={{ padding: 20, marginTop: headerHeight }}>{item}</Text>}
        keyExtractor={(item, index) => index.toString()}
        onScroll={handleScroll}
        scrollEventThrottle={16}
        contentContainerStyle={{ paddingTop: headerHeight }}
      />
    </View>
  );
};

3. 排查其他可能的问题 #

如果修正后还是拿不到滚动信息，可以检查：

• 确保FlatList的内容高度超过容器高度（否则不会触发滚动）
• 没有在父组件中设置pointerEvents: 'none'之类的属性阻止滚动事件传递

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