我们如何将行添加到反应本机列表视图中？

Question

我几乎到处寻找解决方案!

有没有一种方法可以在listview不重新渲染每一行的情况下将行添加到a中？我觉得奇怪的是facebook没有在文档中包含这样做的方法!我觉得可能有一种内存有效的方法,因为你可以用本机脚本(java,swift)来做到这一点.

有很多讨论试图解决它,比如这个:

https://github.com/facebook/react-native/issues/1682

但到目前为止,我还没有找到一种有效的方法.

Answer 1

没有直接的方法将行添加到ListView.ListView.DataSource上没有太多文档.所以这里 -

如果要从ListView添加/追加/前置/更新/删除行,您只需更新dataSource并在setState中调用cloneWithRows().

例如.我想从URL获取数据.每次我点击"加载更多"时,我都会在我的数据源中添加新行.

getInitialState: function(){
    return {
        rawData: [],
        dataSource: new ListView.DataSource({
          rowHasChanged: (row1, row2) => row1 !== row2
        }),
        loaded: false,
        page: 1,
    }
},

在第一次,我在ComponentDidMount()中调用此函数,该函数使用初始数据填充ListView,并在状态中填充"page"= 1.

  reloadData: function(){
    this.setState({ loaded: false, rawData: [], page: 1 });

    API.getUpcomingMovies(this.state.page)
      .then((data) => {
          this.setState({
            rawData: this.state.rawData.concat(data),
            dataSource: this.state.dataSource.cloneWithRows(this.state.rawData.concat(data)),
            loaded: true,
          });
      });
  },

每次我点击"加载更多"以从API获取JSON时,我都会调用以下函数.每当我点击"加载更多"时,"页面"会增加.

fetchData: function(){

    this.setState({ loaded: false, page: this.state.page+1 });

    API.getUpcomingMovies(this.state.page)
        .then((data) => {
            this.setState({
              rawData: this.state.rawData.concat(data),
              dataSource: this.state.dataSource.cloneWithRows(this.state.rawData.concat(data)),
              loaded: true,
            });
        });
  },

如您所见,我正在连接我的rawData [](这是一个包含JSON对象的简单数组).如果您想在rawData中添加新数据,可以执行以下操作 -

this.setState({
    rawData: data.concat(this.state.rawData)
)}