React Native：如何让反转FlatList初始显示最新数据项在顶部？

方案一：直接反转数据（推荐） #

没必要依赖inverted属性，直接把数据源反转，让最新新闻排在数组最前面，FlatList正常渲染即可，初始就会显示顶部的最新新闻，完全不用处理滚动问题：

<FlatList
  data={Object.values(dataObject).reverse()}
  renderItem={({ item }) => <NewsWidget article={item} />}
  contentContainerStyle={styles.body}
  ListFooterComponent={<View style={{ height: 5 }} />}
/>

方案二：保留inverted，强制滚动到目标位置 #

如果一定要保留inverted属性，可以通过FlatList的ref结合scrollToIndex方法，在组件挂载或数据更新后强制滚动到反转后的第一项（也就是原数据的最后一项，最新新闻）：

import { useRef, useEffect } from 'react';
import { FlatList, View } from 'react-native';

// 定义ref引用FlatList实例
const flatListRef = useRef(null);

// 监听数据变化，数据就绪后执行滚动
useEffect(() => {
  const data = Object.values(dataObject);
  if (flatListRef.current && data.length > 0) {
    // 滚动到反转后的第0项，关闭动画避免突兀
    flatListRef.current.scrollToIndex({ index: 0, animated: false });
  }
}, [dataObject]);

// 渲染FlatList
<FlatList
  ref={flatListRef}
  data={Object.values(dataObject)}
  renderItem={({ item }) => <NewsWidget article={item} />}
  contentContainerStyle={styles.body}
  ListFooterComponent={<View style={{ height: 5 }} />}
  inverted
/>

为什么initialScrollIndex没效果？ #

inverted会反转FlatList的滚动坐标系，同时如果你的dataObject是动态加载的，初始渲染时数据可能还未完全就绪，导致initialScrollIndex无法正确定位。方案二通过监听数据变化，确保数据加载完成后再执行滚动，就能解决这个问题。

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