我有一个Text,其中有一个ScrollView,我想检测用户何时滚动到文本的末尾,这样我就可以启用一个按钮.

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

推荐答案

我是这样做的:

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

React-native相关问答推荐

axios 在react native 中给出 [AxiosError: Network Error]

React-Native-Web 错误:rnw_blogpost.bundle.js:1414 Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

如何防止 VS Code 从react-native-web自动导入?

错误发生意外错误:https://registry.yarnpkg.com/react-native-template-react-native-template-typescript:未找到

在 React Native 上为 android 创建自定义 UI 组件,如何向 JS 发送数据?

如何运行 React-Native 示例?

因 JVM 堆空间耗尽而导致守护进程到期?

在使用 redux-persist 重新水化存储之前加载初始状态的默认值

如何在react native中过滤对象数组?

React Native:自定义字体在 Android 和 iOS 上呈现不同

错误:无法解析模块`buffer`

React native - 创建单例模式的最佳方式

词法或预处理器问题 - 未找到 event2/event-config.h 文件

React Native + Jest EMFILE:too many open files error

有react-native复选框的例子吗?

更改按钮 colored颜色 onPress(切换功能)

React Native 从导航堆栈中清除上一个屏幕

在 OPTIONS 响应后使 fetch API 与 CORS 一起工作

无法解析模块react-native-reanimated

将现有的 React Native 项目转换为 Expo