Flatlist scroll Referenzen mit getItemLayoutProp

Question

Ich habe ein kleines Problem mit Flatlist und Scroll-Methoden. Ich habe eine Flatlist mit Kommentaren und wenn neue hinzugefügt wird, möchte ich die Liste nach unten scrollen, um einen Kommentar zu sehen.

Verwenden scrollToIndex funktioniert nicht richtig, native zeigen weiterhin Fehler wegen fehlender getItemLayout, und hier ist ein weiteres Problem mit der Einstellung dieser Funktion - jedes Element kann unterschiedliche Größe haben.

scrollToEnd hat einige Probleme, manchmal scrollt es bis fast zum Ende der Seite, manchmal zu headerComponent -Elementen, die in Flatlist-Requisiten gesetzt sind. Hast du irgendwelche Ideen, wie man es nach unten scrollen lässt?

Answer 1

Um scrollToIndex zu verwenden, müssen Sie getItemLayout verwenden. Es macht keinen Sinn, es zu verwenden, wenn Sie nicht beabsichtigen, getItemLayout zu verwenden. Hier ist ein Beispiel aus den reagieren-native Dokumente genommen:

class ScrollToExample extends Component { 

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


    scrollToIndex =() => { 
    let randomIndex = Math.floor(Math.random(Date.now()) * 
    this.props.data.length); 
    this.flatListRef.scrollToIndex({animated: true, index: 
    randomIndex}); 
    } 

    scrollToItem =() => { 
    let randomIndex = Math.floor(Math.random(Date.now()) * 
    this.props.data.length); 
    this.flatListRef.scrollToIndex({animated: true, index: "" + 
    randomIndex}); 
    } 

    render() { 
    return (
    <FlatList 
     style={{ flex: 1 }} 
     ref={(ref) => { this.flatListRef = ref; }} 
     keyExtractor={item => item} 
     getItemLayout={this.getItemLayout} 
     initialScrollIndex={50} 
     initialNumToRender={2} 
     renderItem={({ item, index}) => (
      <View style={{...style, backgroundColor: this.getColor(index)}}> 
      <Text>{item}</Text> 
      </View> 
     )} 
     {...this.props} 
    /> 
); 

} }

https://gist.github.com/joshyhargreaves/b8eb67d24ce58a6d8bffb469f7eeaf39

hoffe, das hilft!