Próbuję utworzyć FlatList, która utrzymuje aktualną pozycję przewijania zablokowaną i nie zmienia się przez nowe elementy wstawione u góry listy.Blokowanie pozycji przewijania w FlatList (i ScrollView)
Stworzyłem expo snack, aby pokazać moją intencję.
Przekąska przedstawia ScrollView z zielonymi przedmiotami i czarnym elementem na końcu. Po uruchomieniu aplikacji przewija się na dół listy. Po pięciu sekundach w górnej części znajduje się 10 pozycji, a pozycja przewijania zmienia się w zależności od całkowitego rozmiaru tych elementów.
Jest to kod na przekąskę expo:
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} />;
}
}
Chcę utrzymać pozycję przewijania zablokowany, co oznacza - kiedy elementy są wstawiane pozycja przewijania nie ulegnie zmianie (lub przynajmniej w sposób użytkownik nie wie nic, co się stało)
Czy istnieje sposób, aby to zrobić z bieżącym API FlatList i ScrollView? Co trzeba wdrożyć, aby osiągnąć tę funkcję?