React原生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>
    )
  },

我已经尝试过手动调用listview renderRow函数，并复制“新数据”，然后使用cloneWithRows返回到this.state.dataSource中。我无法让图像复选标记自动刷新。如果我保存项目，它会通过热重新加载适当地呈现列表视图。

我在这里做错了什么？我怀疑要么我必须使用ListView的onVisibleChange函数来让渲染自动触发，要么在我的初始状态下更改rowHasChanged以更好地反映更改。但是，我听说onVisibleChange在安卓方面有一些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>
    );
}