React Native中如何让FlashList组件自动滚动到底部？（页面打开时触发）

要实现页面打开时列表自动滚动到末尾，或者数据更新后滚动到底部，可以通过以下步骤操作：

• 给FlashList创建一个引用，用来调用它的滚动方法
• 利用useEffect钩子，在组件挂载完成或者聊天数据更新时，触发滚动到底部的操作

完整代码示例 #

import React, { useRef, useEffect } from 'react';
import { FlashList } from '@shopify/flash-list';

const MyComponent = ({ route }) => {
  const { chat } = route.params;
  // 创建FlashList的引用
  const flashListRef = useRef(null);

  // 当chat数据变化或组件挂载时，滚动到底部
  useEffect(() => {
    // 确保列表已渲染、数据存在时执行滚动
    if (flashListRef.current && chat.length > 0) {
      flashListRef.current.scrollToEnd({
        animated: true, // 是否开启动画，设为false则瞬间滚动到底部
      });
    }
  }, [chat.length]); // 依赖chat的长度，数据更新时自动触发

  // 注意：替换你原代码里的FlatList为FlashList
  return (
    <FlashList
      ref={flashListRef} // 绑定引用
      data={chat}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
    />
  );
};

补充说明 #

• 如果chat数据是异步加载的，可根据实际情况调整useEffect的依赖项，比如直接监听chat本身（若为引用类型，可通过JSON.stringify(chat)确保监听到内容变化）
• scrollToEnd还支持viewPosition参数，用来控制滚动后末尾项的显示位置，默认值0表示完全对齐底部

内容的提问来源于stack exchange，提问作者cwecae