ceci est notre FlatList, dites bonjour:
dates: [
'18/06/2019',
'19/06/2019',
'20/06/2019',
'21/06/2019',
'22/06/2019',
'23/06/2019',
]
nous l'alimentons avec les dates suivantes:
this.state = {
dates: [
'21/06/2019',
'22/06/2019',
'23/06/2019',
]
};
puis lorsque la date visible change ( onViewableItemsChanged ), si nous nous retrouvons au premier élément ( 21/06/2019 ), nous ajoutons des données, de sorte que le nouvel état devienne:
<FlatList
data={this.state.dates}
...
/>
juste après que nous ayons ajouté les données, au lieu de voir TOUJOURS 21/06/2019 (qui était la date à laquelle le préfixe a eu lieu), nous voyons maintenant 19/06/2019 .
En effet, sous le capot, le 21/06/2019 était auparavant l'indice 0, mais après le préfixe, l'indice 0 correspond au 19/06/2019 .
J'essaie de faire en sorte que le jour reste le même après avoir ajouté les données.
S'il vous plaît ne me dites pas d'utiliser scrollToPosition parce que c'est vraiment un hack, pas la solution. Y a-t-il une bonne solution à ce problème?
Merci
3 Réponses :
Il y a un accessoire non documenté maintientVisibleContentPosition sur ScrollView qui fait ce que vous voulez, mais malheureusement, il ne fonctionne pas sur Android
J'ai trouvé une autre solution de contournement en conservant le dernier décalage y avec onScroll et en enregistrant également la hauteur du contenu avant et après l'ajout de nouveaux éléments avec onContentSizeChange et en calculant la différence de hauteur du contenu, et en définissant le nouveau décalage y sur le dernier décalage y + différence de hauteur du contenu!
J'ai également ouvert un problème sur github , mais il n'y a pas encore de solution complète
Merci à sgtpepper43 pour la solution iOS non documentée
Merci de m'avoir rassuré, je ne suis pas le seul à faire face à ce problème. Il semble que quelqu'un devra plonger dans le code Android et implémenter également cet indicateur pour Android.
J'ai testé maintainVisibleContentPosition sur iOS . Mais cette propriété only fonctionne que si vous append données. si vous prepend données au prepend , cela ne fonctionne not .
qui maintainVisibleContentPosition ne fonctionne pas si vous ajoutez des données alors que vous êtes à une position de défilement de 0 (tout le chemin vers le haut). Cela fonctionne si vous faites un préfixe sans être en haut . Même le défilement Y de 1 suffirait.
vérifier ceci
Malheureusement, cela reste un problème même dans React Native 0.63.3 et n'a pas été résolu.
Laissant ceci ici, car il m'a fallu un certain temps pour obtenir une solution de travail / solution de contournement à ce problème qui ne laisse pas de mauvais goût dans ma bouche: pré-remplissez le tableau avec des données vides, puis utilisez la méthode scrollToIndex .
const startingIndex = 4
flatListRef.current.scrollToIndex({index: startingIndex, animated: false, viewPosition: 0})
Puis:
<FlatList
data={this.state.dates}
ref={flatListRef}
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
...
/>
à l'intérieur de votre componentDidMount:
this.state = {
dates: [
'',
'',
'',
'21/06/2019',
'22/06/2019',
'23/06/2019',
]
};
Mais vous ne pouvez pas pré-peupler des jours infinis.
C'est vrai, mais y a-t-il un montant raisonnable par lequel vous pouvez préremplir les données (par exemple, vous attendez-vous à ce qu'un utilisateur recule de plus de 2 ans?)
Parce que vous changez les index, je ne vois pas comment vous pourriez faire cela sans
scrollToIndex(ou, ce serait encore plus hacky). Si vos éléments ont la même hauteur, le défilement sera rapide et vous pouvez utilisergetItemLayoutpour optimiser le rendu.Avez-vous trouvé une solution appropriée? Je suis confronté au même problème dans mon projet.
Non, rien pour l'instant