Wie ein Listview-Artikel ändern, wie markiert React-india

Question

ich ein ListView als Selektor verwenden, funktioniert alles, aber ich kann den visuellen Zustand des Elements der Liste nicht ändern:

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

ich ändern direkt die Daten onPress wie folgt aus:

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

Und ich versuche die Ansicht wie folgt zu ändern:

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

Hier sind styles.selected und styles.unselected nur zwei verschiedene definierte Stile.

Answer 1

Ich kann nicht sagen, was Ihre onAreaSelect hier tut, aber ich hatte das ähnliche Problem, und der Trick besteht darin, wieder dataSource Staat entsprechend Ihrer geänderten rowData.

Für detaillierte Implementierung, React Native offiziellen ListView Beispiel hat mir geholfen. https://facebook.github.io/react-native/docs/listview.html#examples

In ihrem Beispiel, verwenden sie ein anderes Objekt _pressData zu speichern, welche Zeile ausgewählt wird, und jedesmal, wenn sie sich geändert hat, rufen sie _genRows die oben zu tun.