eine einzigartige ref für jedes Element erstellen, während renderItem() in einem SectionList/FlatList nativen reagiert

Question

Dies ist ein einfaches Beispiel unten:

renderItem: ({ item }) =>   


      <SwipeRow 

       ref={(SwipeRow) => { refSwipeRow = SwipeRow }} > 

       <TouchableOpacity 
       onPress={() => { 
        refSwipeRow.closeRow() 
       } 
       </TouchableOpacity> 
      </SwipeRow> 

während onPress refSwipeRow.closeRow() genannt wird, aber es funktioniert nur, auf dem letzten Index, technisch ist es richtig, weil die ref beim Rendern überschrieben wird und am Ende hält es nur die letzte Index-Referenz.

Wie erstellen Sie eine eindeutige Ref für jedes Element.

Answer 1

Beim Rendern FlatList/SectionList sollten Sie jedem gerenderten Objekt eine eindeutige Schlüsselreferenz hinzufügen. Sie können dies erreichen mit keyExtractor prop für die FlatList and SectionList. Sie können darüber mehr lesen here.

Und für Ihre Frage können Sie Refs in ein einzelnes Objekt mit wiederum einer eindeutigen ID setzen. Dann onPress ausgelöst Sie können diesen eindeutigen Wert verwenden, um die Zeile zu schließen.

Für Beispiel

renderItem: ({ item }) => (   
       <SwipeRow 
       ref={(SwipeRow) => { this.rowRefs[item.id] = SwipeRow; }} > 
        <TouchableOpacity 
        onPress={() => { 
         this.rowRefs[item.id].closeRow(); 
        } 
        </TouchableOpacity> 
       </SwipeRow> 
      ) 

aktualisieren this.rowRefs[item.id] nutzen zu können, sollte es Tannen erklären in Komponente constructor als leeres Objekt wie dieses,

constructor(props) { 
    super(props); 
    this.rowRefs = {}; 
}