时间戳

首页 > 解决方案 > FlatList 上的 ReactNative scrollToEnd() - 功能组件

react-native - FlatList 上的 ReactNative scrollToEnd() - 功能组件

问题描述

我正在尝试使用ReactNative. 我面临的问题是，在将新项目添加到后FlatList，我试图将 FlatList 项目滚动到底部，以便新添加的消息可见。

当我查看文档时，我可以看到一个名为scrollToEnd()的方法。但不确定如何按照功能组件风格的编码来使用它。因为当我用谷歌搜索时，我可以看到它ref在类组件样式编码中使用的示例。

但是找不到如何在功能组件中使用它！

标签： react-nativereact-native-flatlist

解决方案

我想你正在寻找useRef

// I hope you don't mind the typescript
import {useRef} from 'react';
import {FlatList} from 'react-native';

export const Comp = () => {
    const flatListRef = useRef<FlatList<any>>();

    // however you detect new items
    flatListRef?.current?.scrollToEnd();

    return (
        <FlatList
            data={[]}
            renderItem={() => null}
            ref={flatListRef}
        />
    );
}

但我认为，如果您inverted={true}在平面列表中使用，它应该对齐顶部，或者更好的底部（我认为）。

推荐阅读