我们如何在react-native列表视图中添加行?

IT技术 listview reactjs react-native
2022-07-26 01:26:36

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

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

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

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

但到目前为止,我还没有找到一种有效的方法来做到这一点。

1个回答

没有直接的方法可以将行添加到您的 ListView。那里没有太多关于 ListView.DataSource 的文档。就这样吧——

如果你想从 ListView 添加/追加/添加/更新/删除行,你所要做的就是更新数据源并在 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)
)}