React Native v0.52.0(iOS)：横向FlatList滚动偏移异常求助

我之前在RN 0.5x版本的横向FlatList里也踩过这个坑——内置的ItemSeparatorComponent在横向模式下的布局计算确实有bug，会导致分隔符偏移异常，而且新增元素时偏移量还会累加之前所有分隔符的宽度。下面给你两个亲测有效的解决方案：

方案一：用列表项边距替代内置分隔符（推荐） #

这个方法直接避开了RN内置分隔符的bug，通过给每个列表项（除最后一个）设置右边距来模拟分隔符，让FlatList能正确计算每个项的总宽度，滚动自然就正常了。

步骤1：修改子项组件，添加条件边距 #

import React from 'react';
import { View, StyleSheet } from 'react-native';

const ListItem = ({ item, isLastItem }) => {
  return (
    <View style={[styles.itemContainer, !isLastItem && styles.separatorMargin]}>
      {/* 这里放你的子项内容，比如图片、文字等 */}
    </View>
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    width: 160, // 你的子项固定宽度
    height: 200, // 子项高度
    backgroundColor: '#fff',
    // 其他子项样式
  },
  separatorMargin: {
    marginRight: 12, // 这里设置你想要的分隔符宽度
  },
});

export default ListItem;

步骤2：在FlatList中传递是否为最后一项的判断 #

<FlatList
  horizontal
  data={yourDataSource}
  showsHorizontalScrollIndicator={false}
  renderItem={({ item, index }) => (
    <ListItem 
      item={item} 
      isLastItem={index === yourDataSource.length - 1} 
    />
  )}
  // 移除原来的ItemSeparatorComponent属性
/>

方案二：手动修正contentOffset（适合必须用内置分隔符的场景） #

如果你的项目必须使用ItemSeparatorComponent，可以通过动态计算contentOffset来抵消错误的偏移量，但这个方法需要监听数据变化，相对繁琐：

import React, { Component } from 'react';
import { FlatList, View, StyleSheet } from 'react-native';

class HorizontalList extends Component {
  state = {
    contentOffset: { x: 0, y: 0 },
  };

  // 计算需要修正的偏移量
  calculateOffset = () => {
    const { data, separatorWidth = 12 } = this.props;
    // RN 0.52.0会多累加(data.length-1)*separatorWidth的偏移，所以反向抵消
    const correctedX = -(data.length - 1) * separatorWidth;
    this.setState({ contentOffset: { x: correctedX, y: 0 } });
  };

  componentDidMount() {
    this.calculateOffset();
  }

  componentDidUpdate(prevProps) {
    // 数据长度变化时重新计算偏移
    if (prevProps.data.length !== this.props.data.length) {
      this.calculateOffset();
    }
  }

  render() {
    const { data, separatorWidth } = this.props;
    return (
      <FlatList
        horizontal
        data={data}
        renderItem={({ item }) => <ListItem item={item} />}
        ItemSeparatorComponent={() => (
          <View style={{ width: separatorWidth, height: '100%' }} />
        )}
        contentOffset={this.state.contentOffset}
        onLayout={this.calculateOffset}
      />
    );
  }
}

export default HorizontalList;

问题根源说明 #

React Native 0.52.0的横向FlatList在处理ItemSeparatorComponent时，错误地将每个分隔符的宽度重复累加进了列表项的滚动偏移计算中，导致滚动时只有分隔符产生偏移，而列表项的左边缘位置没有同步更新。用边距替代分隔符的方式，让FlatList把间距算进每个项的总宽度里，就能让滚动偏移的计算恢复正常。

如果项目允许的话，建议升级到React Native 0.55及以上版本——这个bug在后续版本中已经被官方修复了，升级后直接用ItemSeparatorComponent就能正常工作。

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