Ich versuche eine FlatList zu erstellen, die die aktuelle Bildlaufposition gesperrt hält und nicht durch neue Elemente geändert wird, die am Anfang der Liste eingefügt werden.Sperren der Bildlaufposition in FlatList (und ScrollView)
Ich habe eine expo snack erstellt, um meine Absicht zu demonstrieren.
Der Snack präsentiert eine ScrollView mit grünen Elementen und einem schwarzen Element am Ende. Wenn die App gestartet wird, scrollt sie zum Ende der Liste. Nach fünf Sekunden werden oben 10 Elemente eingefügt, und die Bildlaufposition ändert sich entsprechend der Gesamtgröße dieser Elemente.
Dies ist der Code der Expo Snack:
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} />;
}
}
ich die Scroll-Position verriegelt halten wollen, was bedeutet - wenn Elemente der Bildlaufposition nicht ändern eingefügt werden (oder zumindest in einer Art und Weise der Benutzer weiß nichts, ist passiert)
Gibt es eine Möglichkeit, es mit der aktuellen API von FlatList und ScrollView zu tun? Was muss implementiert werden, um diese Funktion zu erreichen?