反应原生列表视图

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: 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: 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 有一些 android 端的错误，所以除非这是唯一的解决方案，否则我不想用它来修复这个错误。

感谢您的宝贵时间。

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