React Native FlatList如何在页面状态变更时重置滚动位置？

你的问题是：横向FlatList在数据切换后保持了之前的滚动位置，想要每次数据更新时自动滚回开头，不需要刷新整个页面，只要做以下修改就行：

首先纠正两个错误：

• 你用的scrollToIndex={0}是错的，这是FlatList的实例方法，不是可直接传递的props，所以完全没起作用；
• 列表的key应该用keyExtractor属性，不是key，这个错误会影响列表数据更新时的渲染逻辑。

修改后的代码 #

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

const HorizontalScroll = ({items, handlePress}) => {  
  // 创建FlatList的引用，用来调用滚动方法
  const flatListRef = useRef(null);

  // 监听items数据变化，每次数据更新时滚回列表开头
  useEffect(() => {
    if (flatListRef.current && items.length > 0) {
      // 滚动到索引0的位置，animated设为false是瞬间跳转，要动画就改成true
      flatListRef.current.scrollToIndex({ index: 0, animated: false });
      // 也可以用scrollToOffset直接跳转到偏移量0：
      // flatListRef.current.scrollToOffset({ offset: 0, animated: false });
    }
  }, [items]); // 依赖数组传入items，数据变更就触发这个副作用

  const renderItem = ({item}) => {
    const itemData = { color: item.color, title: item.title };
    return <HorizontalItem itemData={itemData} handlePress={handlePress}  />;
  };
    
  return (
    <View style={styles.container}>
      <FlatList
        ref={flatListRef} // 绑定引用
        data={items}
        renderItem={renderItem}
        horizontal={true}
        numColumns={1}
        keyExtractor={(item) => item.id} // 修正key的设置方式
        initialNumToRender={5}
        ItemSeparatorComponent={() => <View style={{width: 8}} />}
      />
    </View>
  );
 };

说明 #

• 不需要刷新整个页面：FlatList会自动根据data的变化更新内容，我们只需要在数据更新后主动调用滚动方法即可；
• useEffect的作用是监听items的变化，每当数据切换时，就触发滚动操作；
• 两种滚动方法选一个就行：scrollToIndex是滚动到指定索引的条目，scrollToOffset是直接滚动到指定的偏移量，这里用哪个效果都一样。

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