Question

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

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

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

Answer 1

我认为您正在寻找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}，它应该会排在顶部，或者排在底部（我认为）。

Answer 2

对于打字稿，您可以只使用：

const listRef = useRef<FlatList>(null);

并且在您的代码中，您只需要检查您的 ref 是否存在：

listRef?.current?.scrollToIndex({animated: true, index: yourIndex})

FlatList上的ReactNative scrollToEnd（）-功能组件

2 个答案: