React Native 中使用 onScroll 获取滚动距离的方法

回答：

在 React Native 中，你可以使用 ScrollView 或 FlatList 组件的 onScroll 事件来获取滚动的距离。onScroll 事件会在滚动时触发，并提供一个包含滚动信息的事件对象。

以下是一个使用 ScrollView 的示例，展示如何获取滚动的距离：

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

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

  const handleScroll = (event) => {
    const yOffset = event.nativeEvent.contentOffset.y;
    setScrollY(yOffset);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.scrollText}>Scroll Y: {scrollY}</Text>
      <ScrollView onScroll={handleScroll} scrollEventThrottle={16}>
        <View style={styles.content}>
          {/* 在这里添加你的内容 */}
          <Text style={styles.item}>Item 1</Text>
          <Text style={styles.item}>Item 2</Text>
          <Text style={styles.item}>Item 3</Text>
          <Text style={styles.item}>Item 4</Text>
          <Text style={styles.item}>Item 5</Text>
          <Text style={styles.item}>Item 6</Text>
          <Text style={styles.item}>Item 7</Text>
          <Text style={styles.item}>Item 8</Text>
          <Text style={styles.item}>Item 9</Text>
          <Text style={styles.item}>Item 10</Text>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
  scrollText: {
    fontSize: 20,
    textAlign: 'center',
    marginBottom: 10,
  },
  content: {
    padding: 20,
  },
  item: {
    fontSize: 18,
    marginVertical: 10,
  },
});

export default App;

在这个示例中：

handleScroll 函数会在滚动时被调用，并接收一个事件对象。
event.nativeEvent.contentOffset.y 提供了垂直方向上的滚动距离。
scrollEventThrottle 属性用于控制 onScroll 事件的调用频率。值越小，调用频率越高。通常设置为 16，以确保每帧都能捕获滚动事件。

你也可以使用类似的方法来处理 FlatList 的滚动事件。只需将 ScrollView 替换为 FlatList 并相应地调整内容即可。

React Native 中使用 onScroll 获取滚动距离的方法

由 ChatGPT4o 使用 ChatGPT 4o 回答