Làm thế nào để thay đổi một ListView mục như đánh dấu Trong Phản ứng-Native

Question

Tôi đang sử dụng một ListView như một chọn, tất cả mọi thứ đang làm việc nhưng tôi không thể thay đổi trạng thái hình ảnh của phần tử của danh sách:

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

tôi thay đổi dữ liệu trực tiếp onPress như thế này:

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

Và tôi cố gắng thay đổi quan điểm như thế này:

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

Nơi styles.selected và styles.unselected chỉ là 2 kiểu được xác định khác nhau.

Answer 1

Tôi không thể nói những gì onAreaSelect của bạn làm ở đây, nhưng tôi đã có vấn đề tương tự, và các trick là để thiết lập lại trạng thái dataSource tương ứng với rowData đã thay đổi của bạn.

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

Để thực hiện chi tiết, Ví dụ chính thức về ListView gốc đã giúp tôi. https://facebook.github.io/react-native/docs/listview.html#examples

Trong ví dụ, họ sử dụng một đối tượng _pressData để ghi nhận những hàng đang được chọn, và mỗi lần nó đã thay đổi, họ gọi _genRows để làm các việc trên.