Come cambiare un ListView Oggetto come codificato React-Native

Question

Sto usando un ListView come selettore, tutto funziona, ma non riesco a cambiare lo stato visivo dell'elemento della lista:

this.state = { 
    dataSource: dataSource.cloneWithRows([ 
         { 
          provincia:"Bocas del Toro", 
          capital: "Bocas del Toro", 
          selected:false, 
         }, 
         { 
          provincia:"Coclé", 
          capital: "Penonomé", 
          selected:false, 
         }, 
... 

cambio i dati onPress direttamente in questo modo:

rowPressed(rowData) { 
    rowData.selected = true; 
    this.props.onAreaSelect(rowData); 
} 

e cerco di cambiare la vista in questo modo:

<TouchableHighlight onPress={() => this.rowPressed(rowData)} 
     underlayColor='#eeeeee' > 
    <View> 
     <View style={[styles.rowContainer, this.state.selected ? styles.selected : styles.unselected ]}> 
     <View style={styles.textContainer}> 
      <Text style={styles.title} 
        numberOfLines={1}>{rowData.provincia}</Text> 
      <Text style={styles.description} 
        numberOfLines={1}>Capital: {rowData.capital}</Text> 
     </View> 

     </View> 
     <View style={styles.separator} /> 
    </View> 
    </TouchableHighlight> 

Dove styles.selected e styles.unselected sono solo 2 diversi stili definiti.

Answer 1

Non riesco a capire cosa fa il tuo onAreaSelect qui, ma ho riscontrato il problema simile e il trucco è impostare lo stato dataSource in modo che corrisponda al tuo rowData modificato.

this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(
    // your new data here 
) 
}); 

un'applicazione dettagliata, Reagire Native esempio ufficiale ListView mi ha aiutato. https://facebook.github.io/react-native/docs/listview.html#examples

Nel loro esempio, usano un altro scopo _pressData per memorizzare gli riga viene selezionata, e ogni volta che è cambiato, si chiamano _genRows per ottenere il risultato.