Блокировка положения прокрутки в FlatList (и ScrollView)

Я пытаюсь создать FlatList, который фиксирует текущую позицию прокрутки и не изменяет новые элементы, вставленные в верхней части списка.

Я создал закуски экспонирования, чтобы продемонстрировать свои намерения.

Закуска представляет ScrollView с зелеными предметами и черный предмет в конце. Когда приложение запускает его, он прокручивается в нижней части списка. Через пять секунд в верхней части вставлено 10 элементов, а положение прокрутки изменяется в соответствии с общим размером этих элементов.

Это код закуски экспонирования:

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

const renderItem = ({ item }) => {
  let backgroundColor;
  if (item == 10) {
    backgroundColor = "black"
  }
  else {
    backgroundColor = item % 2 == 0 ? 'green' : 'blue'
  }

  return (
    <View
      style={{
        width: 200,
        height: 50,
        backgroundColor,
        margin: 10,
      }}
    />
  );
};

const MyList = class extends Component {
  componentDidMount() {
    setTimeout(() => this.ref.scrollToEnd({ animated: false }), 500);
  }
  render() {
    return (
      <FlatList
        ref={r => this.ref = r}
        data={this.props.data}
        renderItem={this.props.renderItem}
      />
    );
  }
};

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 10],
    };
  }

  componentDidMount() {
    const items = [...this.state.items];
    items.unshift(1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
    setTimeout(() => this.setState({ items }), 5000);
  }

  render() {
    return <MyList renderItem={renderItem} data={this.state.items} />;
  }
}

Я хочу сохранить позицию прокрутки заблокированной, то есть - когда элементы вставлены, позиция прокрутки не изменится (или, по крайней мере, так, как пользователь ничего не знает)

Есть ли способ сделать это с помощью текущего API FlatList и ScrollView? Что нужно было реализовать для достижения этой функции?

Ответы

componentDidUpdate(nextProps, nextState) {
  if(nextProps.data != this.props.data) {
    this.ref.scrollToEnd({ animated: false });
  }
}