相关疑难解决方法(0)

我们可以像这样为ListView创建数据源

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});  
var dataSource =  ds.cloneWithRows(['row 1', 'row 2']), };

但是,如果我想添加项目或从数据源中删除项目,我该怎么做？我是否需要始终使用更新的数组调用cloneWithRows？

我知道之前有人问过,例如这里,这里和这里.

但是,没有一个答案/评论是令人满意的.它们要么告诉您克隆无法解决问题的数据,要么在ListView上设置唯一键来解决问题,但会创建一个新问题.

当您在ListView上设置唯一键并在删除后更新它时,整个视图再次呈现并滚动到顶部.向下滚动列表以删除项目的用户希望列表保持其位置.

这是一个人为的例子,使用我认为克隆数据的正确方法:

var ListViewExample = React.createClass({

  getInitialState() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {
      r1 !== r2
    }});
    var rows = ['row 1', 'row 2', 'row 3'];
    return {
      dataSource: ds.cloneWithRows(rows),
    };
  },

  _deleteRow() {
    var rows = ['row 1', 'row 3'];
    this.setState({dataSource: this.state.dataSource.cloneWithRows(rows)})
  },

  renderRow(rowData, sectionID, rowID) {
    return <TouchableOpacity onPress={this._deleteRow}
      style={{height: 60, flex: 1, borderBottomWidth: 1}}>
      <Text>{rowData}</Text>
    </TouchableOpacity>
  },

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
      /> …

当我使用新的部分和行更新状态时,我有一个React Native ListView似乎正在删除UI中的错误行 - 我删除的行保留,但是下面的那个,有时甚至是2,直到我重新加载应用程序.

我究竟做错了什么？

constructor(props) {
  super(props)

  this.state = {
    dataState: DataState.STATE_NOT_LOADED,
    dataSource: new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1.identifier !== r2.identifier,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2
    })
  };
}

componentDidMount() {
  this.loadData();
}

loadData() {
  this.setState({
    dataState: DataState.STATE_LOADING
  });

  User.getDocs()
    .bind(this)
    .then(results => {
      var docs = _.groupBy(results, function (d) {
        return d.createdAt.format('MMMM D');
      });

      this.setState({
        dataState: DataState.STATE_LOADED,
        dataSource: this.state.dataSource.cloneWithRowsAndSections(docs)
      });
    })
    .catch(error => {
      console.log(error);

      this.setState({
        dataState: DataState.STATE_ERROR
      });
    });
}

onTrackPressed(doc) {
  User.untrackDoc(doc) …