将数据添加到 FlatList 的开头而不更改 position

Question

我正在尝试在 flatlist 中实现类似道具的“onBeginReached”。 我想 append 以对用户透明的方式在我的数据数组开头的一些数据。

所以使用这个 flatList：

const App = () => {
  const flatListRef = useRef(null);
  const [data, setData] = useState(generateData(20));

  const renderItem = ({ item }) => {
  console.log(item);
  return (
    <View style={styles.itemContainer}>
      <Text style={styles.itemText}>{item}</Text>
    </View>
  );
};

  const handleMomentumScroll = (event) => {
    console.log("Momentum end")
    const xOffset = event.nativeEvent.contentOffset.x;
    const index = Math.round(xOffset / 30);

    if (index < 1) {
      setData([-10 ,-9, -8, -7, -6,-5, -3, -2, -1, ...data]);
    }
  };

  return (
    <FlatList
      style={{ width: 200, alignSelf: 'center', marginTop: 150 }}
      initialScrollIndex={10}
      horizontal
      data={data}
      snapToAlignment={'start'}
      decelerationRate={'fast'}
      snapToInterval={30}
      getItemLayout={(data, index) => ({
         length: 30,
         offset: 30 * index,
         index,
      })}
      keyExtractor={(item, index) => index.toString()}
      renderItem={renderItem}
      onMomentumScrollEnd={handleMomentumScroll}
    />
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: 'blue',
  },
  itemText: {
    color: 'white',
  },
});

( https://snack.expo.io/GUblotbZc )

如果我滚动到索引 0，它会将我的新数据移到我的数据数组中。 但是，它会自动滚动到新数据数组的第一个索引。 在将新数据移到数组时，我想保留当前的 position。

有一种方法可以实现这种行为吗？

Answer 1

这是演示： https://snack.expo.io/@nomi9995/flatlisttest

在 IOS 中使用maintainVisibleContentPosition VisibleContentPosition 道具来防止自动滚动，但不幸的是，它不适用于 android 但好消息是 android 的拉取请求已经到来，需要与本机反应合并。

<FlatList
  ref={(ref) => { this.chatFlatList = ref; }}
  style={styles.flatList}
  data={this.state.items}
  renderItem={this._renderItem}
  maintainVisibleContentPosition={{
     minIndexForVisible: 0,
  }}
/>

Answer 2

我这样做的方法是使用inverted属性反转 FlatList，同时反转我的列表。 这样，FlatList 的顶部将位于底部，我的数组中的最后一项在那里可见。 当用户滚动到顶部onEndReached被触发，我将新项目添加到数组的开头，它们将被添加到 FlatList 的顶部而不更改顶部的当前可见项目。