FlatList initialScrollIndex 不符合预期：滚动后内容常不可见

我使用横向FlatList作为菜单栏，期望点击菜单项时通过initialScrollIndex让FlatList滚动到对应项，但多次出现滚动后内容不可见的问题。

我的代码 #

<FlatList
  ref={listRef}
  data={headerMenuChannels}
  style={{
    backgroundColor: applicationTopBar.buttonBarColor,
    width: Dimensions.get('window').width,
  }}
  showsHorizontalScrollIndicator={false}
  horizontal={true}
  onScrollToIndexFailed={error => console.log('scroll failed', error)}
  initialScrollIndex={screenNumber}
  renderItem={v => (
    <View
      key={v.index}
      onLayout={ref => onMenuLayout(ref, v.index)}>
      <Text
        onPress={() => {
          setScreenNumber(v.index);
        }}>
        {v.item}
      </Text>
    </View>
  )}
/>

问题演示 #

解决方案 #

• 放弃用initialScrollIndex做动态滚动：initialScrollIndex仅适用于组件初始化时的定位，动态切换菜单项应该通过FlatList的scrollToIndex方法实现，配合ref调用。
• 提前缓存子项尺寸：FlatList滚动到指定索引需要知道每个子项的宽度，通过onLayout收集每个菜单项的宽度并存储，避免滚动时尺寸未就绪导致定位错误。
• 修改后的代码示例：
  1. 新增状态存储子项宽度：

     const [itemWidths, setItemWidths] = useState([]);
     

  2. 实现onMenuLayout收集尺寸：

     const onMenuLayout = (e, index) => {
       const { width } = e.nativeEvent.layout;
       setItemWidths(prev => {
         const newWidths = [...prev];
         newWidths[index] = width;
         return newWidths;
       });
     };
     

  3. 修改点击事件，调用scrollToIndex：

     <Text
       onPress={() => {
         setScreenNumber(v.index);
         listRef.current?.scrollToIndex({
           index: v.index,
           animated: true,
           viewPosition: 0.5 // 让目标项居中显示，可按需调整
         });
       }}>
       {v.item}
     </Text>
     

  4. 移除initialScrollIndex，改用useEffect初始化滚动：

     useEffect(() => {
       if (listRef.current && screenNumber !== undefined) {
         listRef.current.scrollToIndex({
           index: screenNumber,
           animated: false
         });
       }
     }, [screenNumber]);
     

  5. 优化onScrollToIndexFailed兜底逻辑：

     const onScrollToIndexFailed = (error) => {
       // 计算到目标索引的偏移量
       const offset = itemWidths.slice(0, error.index).reduce((sum, width) => sum + (width || 0), 0);
       listRef.current?.scrollToOffset({ offset, animated: true });
     };
     

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