Invertieren einer FlatList

Question

Ich arbeite gerade an einer reaktiven nativen App für Android und habe Zugriff auf die neue FlatList. Es hat einige sehr wichtige Funktionen. Meine ListView wird jedoch mit der react-native-inverterable-scroll-Ansicht invertiert. Dies scheint mit FlatList nicht richtig zu funktionieren. Das Scrollen wird nicht korrekt umgekehrt.

Kann jemand eine FlatList invertieren? Oder vielleicht, wie man eine Flatlist lädt und dann eine Schriftrolle nach unten drückt, ohne dass der Benutzer es merkt? Meine eigenen Versuche, eine Schriftrolle zu erzwingen, verzögern sich oft.

Answer 1

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>) 

Genießen Sie es)

Answer 2

Wie in den anderen Antworten beschrieben, zur Zeit den besten Weg, um dies zu tun zu gehen, ist eine Transformation in den enthaltenden Ansicht des FlatList anzuwenden, die es invertiert.

Wenden Sie dann die gleiche Umwandlung auf jedes Listenelement an, um sicherzustellen, dass sie korrekt neu ausgerichtet sind.

_renderItem = (info) => { 
    return (
     <View style={{ transform: [{ scaleY: -1 }] }}> 
      {this.props.renderItem(info)} 
     </View> 
    ); 
} 

Ich habe ein Paket geschrieben, das genau das tut, alles, was Sie tun müssen, ist dies eine Standard FlatList Komponenten anstelle verwenden und die inverted Eigenschaft übergeben.

https://www.npmjs.com/package/react-native-invertible-flat-list

Answer 3

Dies nun aus der Box in FlatList kommt!

Verwenden Sie einfach:

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

Dies bewirkt, dass das erste Element am Ende der Liste angezeigt werden, und die Liste beginnt am unteren Ende, das erste Element zeigt.

Wenn Sie das letzte Element benötigen, das unten angezeigt wird, kehren Sie einfach das Array um, das Sie in der data Prop bereitstellen.