native：ListView，如何从顶部推新的行

我一直在试图理解如何设计一个ListView来接收新数据并将其推到前台。 使用下面的代码，该列表不能正确反映更改，而不是在顶部有一个新行，最后一个是重复的。

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableHighlight,
} = React;

var listview = React.createClass({
  rows: [],

  _rowHasChanged: function (r1, r2) {
    // if (r1 !== r2)
    //   console.log('rowChanged', r1, r2);
    // else
    //   console.log('row didn't Changed', r1, r2);
    return r1 !== r2;
  },

  getInitialState: function() {
    return {
      dataSource: new ListView.DataSource({rowHasChanged: this._rowHasChanged}),
    };
  },

  componentDidMount: function () {
    this.rows = [
      {id: 0, text: '0: text'},
      {id: 1, text: '1: text'},
      {id: 2, text: '2: text'},
      {id: 3, text: '3: text'},
    ];

    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.rows),
    });
  },

  pushTopRow: function () {
    var id = this.rows.length;
    this.rows.unshift({id: id, text: id + ': text'});

    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.rows),
    });
  },

  render: function() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text key={rowData.id}>{rowData.text}</Text>}
        />
        <TouchableHighlight
          onPress={this.pushTopRow}>
          <Text>PUSH TOP</Text>
        </TouchableHighlight>
      </View>
    );
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'orange',
  },
});

AppRegistry.registerComponent('listview', () => listview);

然后我试着：

pushTopRow: function () {
    var id = this.rows.length;
    var newRow = [{id: id, text: id + ': text'}];
    this.rows = newRow.concat(this.rows);

    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.rows),
    });
  },

这实际上有效，但我不明白为什么第一种方法不起作用。 我想弄清楚用ListView处理的最佳做法是什么：

我是否应该在任何情况下都使用cloneWithRows和一个新的数组，即使是单个添加/删除操作？

还有什么可以设置ListView / DataSource机制，以最小的重绘（键，hasRowChanged特定比较？）正常工作，

缺乏文件和例证，为我和任何人澄清这一点很好。 谢谢你，并有一个很好的代码日。

---

ListView通过数据源索引分配组件键，因此每当数据源被预置时都会重新渲染所有行。 如果您的行数据具有任何唯一的ID，您可以创建一个修改的ListView，将其用作关键字。 例如，请参阅PrependableListView，它将使用行数据上的id属性。

注意：这个组件不是通用的，如果没有定义id属性，将会失败。

注意：我意识到这并不能回答你的整个问题，只是关于预先考虑数据源的一个特殊问题。

链接地址: http://www.djcxy.com/p/28023.html

上一篇: native: ListView, how to push new rows from top

下一篇: WebGL: Strange behavior when render spritebatch into render texture