Come forza ridisegna ListView quando questo.stato è cambiato (ma non il dataSource).

Question

Ho creato un componente che utilizza un ListView per visualizzare un elenco di contatti. Quando faccio clic su una riga, aggiorno un array nel componente state che contiene tutti i contatti selezionati. Tuttavia, non sto usando questo array come dataSource per il mio componente ListView.

Vorrei ridisegnare lo ListView ogni volta che questa matrice viene modificata per visualizzare un'immagine per i contatti selezionati.

Ecco un esempio della mia situazione attuale:

renderListView: function(){ 
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this.renderRow} 
     style={styles.listView} 
    /> 
} 
renderRow:function(row){ 
    return if(this.state.something === true) <Text>Something</Text> 
    else <Text>Something Else</Text> 
} 

Ho provato a chiamare .forceUpdate(), chiama il metodo render ma non il metodo renderRow.

Qualche suggerimento?

Answer 1

Ho appena avuto lo stesso problema. Controlla la mia domanda qui: React Native ListView not updating on data change

Fondamentalmente, sembra esserci un bug con il componente ListView ed è necessario ricostruire ogni elemento che cambia nell'origine dati per il ListView per ridisegnarlo.

Ecco un esempio di lavoro: https://rnplay.org/apps/GWoFWg

In primo luogo, creare l'origine dati e una copia della matrice e salvarli a stato. Nel mio caso, foods è la matrice.

constructor(props){ 
    super(props); 
    var ds = new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => row1 !== row2, 
    }); 
    this.state = { 
     dataSource: ds.cloneWithRows(foods), 
     db: foods, 
    }; 
} 

Quando si vuole cambiare qualcosa nell'origine dati, fare una copia della matrice si è salvato allo stato, di ricostruire l'oggetto con il cambiamento e quindi salvare il nuovo array con il cambio di nuovo alla condizione (sia db e origine dati).

onCollapse(rowID: number) { 
    console.log("rowID", rowID); 
    var newArray = this.state.db.slice(); 
    newArray[rowID] = { 
     key: newArray[rowID].key, 
     details: newArray[rowID].details, 
     isCollapsed: newArray[rowID].isCollapsed == false ? true : false, 
    }; 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(newArray), 
     db: newArray, 
    }); 
}