Я пытаюсь создать 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? Что нужно было реализовать для достижения этой функции?