web-dev-qa-db-fra.com

Inverser une FlatList

Je travaille actuellement sur une application native React pour Android et j'ai accès à la nouvelle FlatList. Il a des fonctionnalités très nécessaires. Cependant, ma vue de liste est inversée en utilisant la vue de défilement réagissant-natif-inversable. Cela ne semble pas fonctionner correctement avec FlatList. Le défilement n'est pas correctement inversé.

Quelqu'un sait-il comment inverser une FlatList? Ou peut-être comment charger une Flatlist, puis forcer un défilement vers le bas sans que l'utilisateur ne s'en rende compte? Mes propres tentatives pour forcer un défilement vers le bas sont souvent retardées.

androidreactjsreact-native
20
Ramzi C.
render() {
const messages = this.props.messages.reverse();

return (
  <FlatList
    renderItem={this._renderItem}
    data={ messages }
    keyExtractor={this._keyExtractor}
    style={{  transform: [{ scaleY: -1 }] }}
  />
); }

_keyExtractor = (item, index) => item.id+''+index;

_renderItem = ({item}) => (
<View style={{ transform: [{ scaleY: -1 }]}}>
  <ChatItem />
</View>)

Profitez-en)

19
Bohdan Pomohaibo

Cela sort maintenant de la boîte dans FlatList!

Utilisez simplement:

<FlatList
  inverted
  data=...
  renderItem=...
/>

Cela provoque le premier élément à apparaître en bas de la liste, et la liste commence en bas, montrant le premier élément.

Si vous avez besoin que le dernier élément s'affiche en bas, inversez simplement le tableau que vous fournissez dans le prop data.

53
Shaked Sayag