react-native - 在不改变位置的情况下将数据添加到 FlatList 的开头

Question

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

所以使用这个 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，它会将我的新数据取消移动到我的数据数组。但是，它会自动滚动到新数据数组的第一个索引。在将新数据移到数组时，我想保持当前位置。

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

Answer 1

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

使用maintainVisibleContentPosition props用于防止 IOS 中的自动滚动，但不幸的是，它不适用于 android，但好消息是 pull request已经为 android 而来，需要与 react native 合并。

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