React Native：横向FlatList滚动时出现崩溃重置问题求助

问题现象 #

滚动横向FlatList时，列表会突然跳回初始位置，出现滚动重置的异常（对应提供的动图表现）。

问题代码片段 #

<View style={styles.container}>
  <CategorySelector
    category={allCategories}
    isSelected={(selectedCategory === null || allCategories.id === selectedCategory) ? true : false}
  />
  <FlatList
    horizontal
    data={I18nManager.isRTL ? categories.reverse() : categories}
    renderItem={renderCategoryList}
    keyExtractor={(item, index) => index.toString()}
    showsHorizontalScrollIndicator={true}
  />
</View>

核心修复点 #

• 禁止直接修改原数组：categories.reverse()会直接篡改原数组，每次组件渲染时都会导致data的引用或内容变化，触发FlatList重新渲染并重置滚动位置。改用浅拷贝后反转生成新数组：

  data={I18nManager.isRTL ? [...categories].reverse() : categories}
  

• 使用item唯一ID作为key：用index作为keyExtractor的返回值，当数组元素顺序改变时，会导致FlatList错误地复用组件，引发滚动异常。替换为item的唯一标识：

  keyExtractor={(item) => item.id.toString()}
  

• 避免不必要的重渲染：如果父组件频繁重渲染，会导致FlatList被重新初始化。可以用React.memo包裹当前组件，或者确保FlatList的props（比如data、renderItem）引用稳定。如果需要持久化滚动位置，可通过useRef保存滚动偏移量并恢复：

  const flatListRef = useRef(null);
  const scrollOffset = useRef(0);
  
  // ...
  
  <FlatList
    ref={flatListRef}
    // 其他props
    onScrollEndDrag={(e) => {
      scrollOffset.current = e.nativeEvent.contentOffset.x;
    }}
    onLayout={() => {
      flatListRef.current?.scrollToOffset({ x: scrollOffset.current, animated: false });
    }}
  />
  

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