反应原生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功能以及使“新数据”的副本，并使用cloneWithRows回this.state.dataSource。我无法使图像复选标记自动刷新。如果我保存了项目，它会通过热重载来适当地呈现列表视图。

我在这里做错了什么？我怀疑它要么是我必须使用ListView的onVisibleChange函数来让渲染自动触发或更改我初始状态下的rowHasChanged以更适当地反映更改。但是，我听说onVisibleChange在android方面存在一些bug，所以除非这是我不想用它来修复这个bug的唯一解决方案。

谢谢你的时间。

Answer 1

尝试在您的行中添加id，不要直接比较rowData，也不必在selectRow函数中添加this.renderRow(rowData);。您的代码如下所示：

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> 
    ); 
}