ReactNative [Flatlist] scrollToOffset, comment déterminer la position décalée de la ligne cliquée?

Question

Je veux une ligne dans un FlatList pour faire défiler vers le haut de l'écran chaque fois qu'un utilisateur clique dessus. Je le fais actuellement en utilisant la méthode scrollToIndex mais le problème est que je dois animer la marge supérieure (de 10 à 0) pour la faire passer en haut de l'écran. J'ai également un problème où si un utilisateur clique sur une ligne pour développer la ligne, et une rangée précédente a déjà été développée, la ligne précédente va se réduire entraînant l'original scrollToIndex à animer à une certaine position en haut de l'écran. Mes deux alternatives actuelles doivent déclencher un scrollToIndex supplémentaire une fois que la ligne précédente a fini de se contracter ou utiliser scrollToOffset pour savoir où faire défiler en fonction des bonnes vieilles valeurs mathématiques. Existe-t-il un moyen de déterminer les positions de décalage de ligne par index ou une autre valeur chaque fois que vous cliquez dessus?

Merci pour toute aide que quelqu'un pourrait être en mesure de fournir!

Answer 1

Au lieu d'essayer de savoir où faire défiler à l'aide de la méthode scrollToOffset, j'utilise toujours la méthode scrollToIndex et utiliser le paramètre viewOffset afin de calculer la quantité de décalage à ajouter à la méthode: la différence entre l'expansion et a réduit les hauteurs de tout autre élément actuellement développé (le cas échéant) et soustrayant la marge supérieure de l'élément cliqué.

Answer 2

Vous pouvez utiliser scrollToItem pour obtenir ce que vous essayez d'atteindre

suppose donc que vous avez cette composante FlatList

<FlatList 
     ref={(ref) => { this._flatList = ref; }} 
     data = {dataSourche} 
     renderItem = {( info: {item:item, index:number}) => this._renderFlatListItem(info.item, info.index)} 
     keyExtractor = {(item) => item.id} 
     decelerationRate={0} 
     snapToInterval={cardHeight} 
     snapToAlignment={"start"} //Can also be 'center' or 'end' 
     onMomentumScrollEnd = {(event) => this._onMomentumScrollEnd(event)} 
     getItemLayout = {this.getItemLayout}/> 

Vous devez définir une getItemLayout méthode qui indiquera les flatList 3 choses

1. longueur: Dans votre cas la hauteur de la carte
2. décalage: cette distance est haut de la liste à la carte actuelle en général, nous pouvons définir comme longueur * indice de la carte
3. index de la carte

donc c'est un échantillon getItemLayout que vous pouvez vous référer à

getItemLayout = (data, index) => (
     { length: 170, offset: 170 * index, index } 
    ); 

suivant sera votre FlatList scrollToItem appel

this._flatList.scrollToItem({ 
       animated:true, //can also be false 
       item:item, 
       viewPosition:0 //this is the first position that is currently attached to the window 
      })