React Native Flatlist onViewableItemsChanged报错求助：不支持动态修改

错误原因 #

React Native的FlatList不允许动态修改onViewableItemsChanged或viewabilityConfig的引用。即便用useCallback包裹回调，某些场景下仍可能被检测到引用变化，触发Changing onViewableItemsChanged on the fly is not supported错误。

修复方案 #

核心是确保onViewableItemsChanged的引用在组件生命周期内完全稳定，改用useRef来保存该回调函数：

1. 用useRef存储onViewableItemsChanged #

替换原有的useCallback定义方式，把回调存入useRef：

const onViewableItemsChangedRef = useRef(({ viewableItems }) => {
  if (viewableItems.length >= 1) {
    setCurrentSectionIndex(viewableItems[0].index);
  }
});

2. 修改FlatList的props引用 #

将FlatList的onViewableItemsChanged属性改为引用useRef的current值：

<FlatList
  ref={flatListRef} 
  horizontal
  pagingEnabled
  data={data}
  keyExtractor={(item, index) => index.toString()}
  renderItem={renderItem}
  viewabilityConfig={viewabilityConfig.current}
  onViewableItemsChanged={onViewableItemsChangedRef.current} 
/>

3. 可选：完善按钮点击的边界判断 #

避免左按钮点击时index出现负数，补充边界检查：

const onLeftButtonPress = useCallback(() => {
  if (currentSectionIndex > 0 && flatListRef.current) {
    flatListRef.current.scrollToIndex({
      index: currentSectionIndex - 1,
    });
    setCurrentSectionIndex(currentSectionIndex - 1);
  }
}, [currentSectionIndex]);

原理说明 #

useRef保存的函数引用在组件整个生命周期内不会改变，FlatList无法检测到onViewableItemsChanged的引用变化，自然不会抛出错误。而原有的useCallback虽然能缓存函数，但在组件重新渲染时，仍存在被FlatList误判为动态修改的可能。

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