React Native ListView

Question

У меня проблемы с представлением списка, чтобы обновить его самостоятельно. У меня есть некоторые фиктивные данные и изображение, которое я бы хотел отобразить на экране, или непроверенным изображением. Просмотр списка выглядит правильно, я просто не получаю автоматическую повторную визуализацию из представления списка при нажатии.

У меня есть это в функции getInitialState:

var ds = new ListView.DataSource({ 
    rowHasChanged: (r1, r2) => r1 != r2 
}) 

var dummyData = this.props.navigator.dummyData; 
var formattedData = this.formatData(dummyData); 

return ({ 
    data: formattedData, 
    dataSource: ds.cloneWithRows(formattedData), 
    selectedRow: {}. 
}) 

formatData: function(data){...} // code to format data, it is working as intended 

В моей визуализации у меня есть это:

render:function() { 
    return(
    <View> 
     <ListView 
     style={{flex:10}} 
     dataSource={this.state.dataSource} 
     renderRow={this.renderRow} 
     renderSeperator={this.renderSeperator} 
     enableEmptySections={true} 
     /> 
    </View> 
) 
} 

renderRow:

renderRow: function(rowData) { 
    return(
    <TouchableHighlight onPress={() => {this.selectRow(rowData)} } > 
    <View style={{borderLeftWidth: 8, borderLeftColor: '#81BD41'}}> 
    <View style={styles.scheduleRow}> 

     <View style={styles.shiftTextContainer}> 
     <Text style={styles.textName}> 
      {rowData.firstName} {rowData.lastName} 
     </Text> 
     </View> 

     <View style={styles.checkedContainer}> 
     {this.imageCheck(rowData)} 
     </View> 

    </View> 
    </View> 
    </TouchableHighlight> 

На пресс selectRow

selectRow: function(rowData) { 

    console.log(this.state.selectedRow == rowData); 
    var copyData = this.state.data; 

    if (this.state.selectedRow === rowData) { 
     this.setState({selectedRow:''}); 
     rowData.selected = false; 
    } else { 
     this.setState({selectedRow: rowData}) 
     rowData.selected = true; 
    } 

    this.setState({dataSource: this.state.dataSource.cloneWithRows(copyData)}); 
    this.renderRow(rowData); 
    }, 

проверка

И, наконец, изображение:

imageCheck: function(rowData) { 
    var image = ''; 

    if (this.state.selectedRow === rowData) { 
     image = checkedImage; 
    } else { 
     image = uncheckedImage; 
    } 

    return (
     <View> 
     <Image style={styles.imageSize} source={image} /> 
     </View> 
    ) 
    }, 

Я попытался вручную вызвать функцию renderRow ListView, а также сделать копию «новых данных» и использование cloneWithRows обратно в this.state.dataSource. Я не могу установить флажок изображения для автоматического обновления. Если я сохраню проект, он отобразит список должным образом с помощью горячей перезагрузки.

Что я здесь делаю неправильно? Я подозреваю, что это либо я должен использовать функцию onVisibleChange для ListView, чтобы заставить рендер автоматически запускать или изменять rowHasChanged в моем первоначальном состоянии, чтобы отразить изменение более соответствующим образом. Но, я слышал, что onVisibleChange имеет некоторые ошибки для стороны Android, поэтому, если это единственное решение, которое я не хочу использовать, чтобы исправить эту ошибку.

Спасибо за ваше время.

Answer 1

Попробуйте добавить id в ваших рядах, не сравнить rowData непосредственно, и вы не должны добавить this.renderRow(rowData); в вашей selectRow функции. Ваш код будет выглядеть так:

renderRow: function(rowData) { 
    return(
     <TouchableHighlight onPress={() => {this.selectRow(rowData.id)} } > 
     ... 
    ); 
} 

selectRow(rowId){ 

    this.setState({selectedRow:rowId}); 
} 

imageCheck(){ 

    if (this.state.selectedRow == rowData.id){ 
     image = checkedImage; 
    } 
    else{ 
     image = uncheckedImage; 
    } 

    return (
     <View> 
     <Image style={styles.imageSize} source={image} /> 
     </View> 
    ); 
}