web-dev-qa-db-fra.com

React native flatlist initial scroll to bottom

J'essaie de créer un chat en React native en utilisant un <Flastlist />

Comme WhatsApp et d'autres applications de chat, les messages commencent en bas.

Après avoir récupéré les messages de mon API, j'appelle

this.myFlatList.scrollToEnd({animated: false});

Mais il défile quelque part au milieu et parfois avec moins d'éléments vers le bas et parfois il ne fait rien.

Comment puis-je faire défiler initialement vers le bas?

Mes messages de chat ont des hauteurs différentes, je ne peux donc pas calculer la hauteur.

react-nativechatreact-native-flatlist
8
yooouuri

J'ai eu un problème similaire. Si vous voulez que vos messages de discussion commencent en bas, vous pouvez définir "inversé" sur vrai et afficher vos messages et votre horodatage dans une direction opposée.

Vérifiez ici la propriété "inversée" de FlatList. https://facebook.github.io/react-native/docs/flatlist#inverted

Si vous voulez que vos messages de discussion commencent en haut, c'est ce que j'essaie de réaliser. Je n'ai pas pu trouver de solution dans FlatList, car comme vous l'avez dit, les hauteurs sont différentes, je n'ai pas pu utiliser getItemLayout qui fait que "scrollToEnd" se comporte de manière étrange.

Je suis l'approche mentionnée par @My Mai, en utilisant ScrollView à la place et en faisant scrollToEnd ({animated: false}) dans une fonction setTimeout. En outre, j'ai ajouté un état pour masquer le contenu jusqu'à ce que scrollToEnd soit terminé, de sorte que l'utilisateur ne verrait aucun défilement.

3
CAIsoul

J'ai rencontré le même problème avec vous, puis j'ai décidé d'utiliser ScrollView. C'est réparé:

componentDidMount() {
  setTimeout(() => {
    this.scrollView.scrollToEnd();
  });
}

<ScrollView ref={(ref) => { this.scrollView = ref; }} style={styles.messages}>
      {
        messages.map((item, i) => (
          <Message 
            key={i} 
            direction={item.userType === 'banker' ? 'right' : 'left'} 
            text={item.message} 
            name={item.name}
            time={item.createdAt}
          />
        ))
      }
    </ScrollView>`
2
My Mai

Définissez initialScrollIndex sur la longueur de votre ensemble de données - 1.

C'est à dire.

<Flatlist
data={dataSet}
initialScrollIndex={dataSet.length - 1}
/>
1
peralmq

Je suppose que RN ne peut pas deviner votre mise en page, il ne peut donc pas savoir combien il doit "bouger". Selon les méthodes de défilement dans les documents, vous devrez peut-être implémenter une fonction getItemLayout, afin que RN puisse dire combien il doit faire défiler.

https://facebook.github.io/react-native/docs/flatlist.html#scrolltoend

0
sfratini

Les gars si vous voulez que FlatList défile vers le bas au rendu initial. Vous venez d'ajouter inversé = {- 1} à votre FlatList. J'ai du mal à faire défiler vers le bas pendant quelques heures, mais cela se termine par inversé = {- 1}. Pas besoin de trop réfléchir à la mesure dynamique de la hauteur des éléments FlatList en utilisant getItemLayout et initialScrollIndex ou quoi que ce soit.

0
HE xinhao