react-native - ScrollView が最後まで到達したことを検出する

Question

内に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 をゼロに設定してください。