检测 ScrollView 已结束 [英] Detect ScrollView has reached the end

问题描述

我在 ScrollView 中有一个带有长文本的 Text，我想检测用户何时滚动到文本末尾，以便我可以启用按钮.

I have a Text with long text inside a ScrollView and I want to detect when the user has scrolled to the end of the text so I can enable a button.

我一直在调试 onScroll 事件中的事件对象，但似乎没有任何可以使用的值.

I've been debugging the event object from the onScroll event but there doesn't seem any value I can use.

推荐答案

我是这样做的:

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

const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
  const paddingToBottom = 20;
  return layoutMeasurement.height + contentOffset.y >=
    contentSize.height - paddingToBottom;
};

const MyCoolScrollViewComponent = ({enableSomeButton}) => (
  <ScrollView
    onScroll={({nativeEvent}) => {
      if (isCloseToBottom(nativeEvent)) {
        enableSomeButton();
      }
    }}
    scrollEventThrottle={400}
  >
    <Text>Here is very long lorem ipsum or something...</Text>
  </ScrollView>
);

export default MyCoolScrollViewComponent;

我想添加 paddingToBottom 因为通常不需要将 ScrollView 滚动到底部直到最后一个像素.但是，如果您希望将 paddingToBottom 设置为零.

I wanted to add paddingToBottom because usually it is not needed that ScrollView is scrolled to the bottom till last pixel. But if you want that set paddingToBottom to zero.

这篇关于检测 ScrollView 已结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！