react-native - 检测 ScrollView 已到尽头

Question

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

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

Answer 1

我是这样做的：

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 设置为零。

Answer 2

当人们在这里提供帮助时，我将添加他们编写的简单代码以使到达顶部和到达底部事件，并且我做了一个小插图以使事情变得更简单

<ScrollView
onScroll={({nativeEvent})=>{
if(isCloseToTop(nativeEvent)){
    //do something
}
if(isCloseToBottom(nativeEvent)){
   //do something
}
}}
>
...contents
</ScrollView>



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



ifCloseToTop({layoutMeasurement, contentOffset, contentSize}){
   return contentOffset.y == 0;
}

Answer 3

<... onScroll={(e) => {
        let paddingToBottom = 10;
        paddingToBottom += e.nativeEvent.layoutMeasurement.height;
        if(e.nativeEvent.contentOffset.y >= e.nativeEvent.contentSize.height - paddingToBottom) {
          // make something...
        }
      }}>...

像这个 react-native 0.44

Answer 4

对于 Horizo​​ntal ScrollView（例如 Carousels） ，将isCloseToBottom函数替换为isCloseToRight

isCloseToRight = ({ layoutMeasurement, contentOffset, contentSize }) => {
    const paddingToRight = 20;
    return layoutMeasurement.width + contentOffset.x >= contentSize.width - paddingToRight;
};

Answer 5

另一种解决方案可能是使用ListView具有方法的单行（您的文本）onEndReached。请参阅此处的文档

Answer 6

@Henrik R 是对的。但是你也应该使用 Math.ceil() 。

function handleInfinityScroll(event) {
        let mHeight = event.nativeEvent.layoutMeasurement.height;
        let cSize = event.nativeEvent.contentSize.height;
        let Y = event.nativeEvent.contentOffset.y;

        if(Math.ceil(mHeight + Y) >= cSize) return true;
        return false;
}

Answer 7

作为对 Henrik R 答案的补充：

如果您需要知道用户在挂载时是否已到达内容的末尾（内容可能会或可能不会太长，具体取决于设备大小） - 这是我的解决方案：

<ScrollView 
        onLayout={this.onLayoutScrollView}
        onScroll={this.onScroll}>
    <View onLayout={this.onLayoutScrollContent}>
        {/*...*/}
    </View>
</ScrollView>

结合

onLayout(wrapper, { nativeEvent }) {
    if (wrapper) {
        this.setState({
            wrapperHeight: nativeEvent.layout.height,
        });
    } else {
        this.setState({
            contentHeight: nativeEvent.layout.height,
            isCloseToBottom:
              this.state.wrapperHeight - nativeEvent.layout.height >= 0,
        });
    }
}

Answer 8

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


 <ScrollView
    onMomentumScrollEnd={({ nativeEvent }) => {
      if (isCloseToBottom(nativeEvent)) {
        loadMoreData()
      }
    }}
    scrollEventThrottle={1}
  >

上面的答案是正确的，但是在滚动视图中到达终点时回调使用onMomentumScrollEnd而不是onScroll

Answer 9

我使用 ScrollView，这对我有用

这是我的解决方案：

我将 onMomentumScrollEnd 道具传递给 scrollView 并在 event.nativeEvent 的基础上在 ScrollView 中实现了 onEndReached 功能

 onMomentumScrollEnd={(event) => { 
          if (isCloseToBottom(event.nativeEvent)) {
            LoadMoreRandomData()
          }
         }
       }}

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

};