How to change a ListView element designated as "React-Native"

Question

I use ListView as a selector, everything works, but I cannot change the visual state of the list item:

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

I change the data directly to like this:

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

And I'm trying to change the view as follows:

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

Where styles.selected and styles.unselected are just 2 different specific styles.

Answer 1

I can’t say what your onAreaSelect is doing here, but I had a similar problem, and the trick is to set the dataSource state dataSource , corresponding to your modified Data line.

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

For a detailed implementation, the React Native official ListView example helped me. https://facebook.imtqy.com/react-native/docs/listview.html#examples

In their example, they use another _pressData object to store the selected row, and each time it changes, they call _genRows to do this.