ReactNative列表视图初始状态

ReactNative listview initial state

本文关键字：初始状态 视图 列表 ReactNative      更新时间：2023-09-26

我已经开始开发一个react本机应用程序，并且在初始化listview时遇到了问题。

我正在使用react原生数据库模型插件来存储和检索我的数据

问题是，我想在react listview的getInitialState函数中获取数据，我需要调用一个回调函数。。

这是我的类的代码，用于从数据库检索我的数据：

'use strict';
var React = require('react-native');
var DB = require('./Database');
var DBEvents = require('react-native-db-models').DBEvents;
class BarcodeDAO {
  get_all_barcodes(success) {
    DB.barcodes.get_all(success);
  }
}
module.exports = BarcodeDAO;

这是我的列表视图代码：

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  Text,
  ListView,
  View,
} = React;
var BarcodeDAO = require('./BarcodeDAO');

var BarcodeList = React.createClass({
  statics: {
    title: '<ListView> - Simple',
    description: 'Performant, scrollable list of data.'
  },
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    var barcodeDAO = new BarcodeDAO();
    barcodeDAO.get_all_barcodes(function(result) {
       var data = [];
       for(var i = 1; i <= result.totalrows; i++) {
         console.log(result.rows[i].barcode.value);
         data[i-1] = result.rows[i].barcode.value;
       }
       //THIS IS WHERE I DON'T KNOW HOW TO PASS THE VALUE THE THE return of the getInitialState function..
       //self.state.dataSource.cloneWithRows(data);
       //self.getDataSource(self,data);
    });
    return {
      dataSource: ds.cloneWithRows({??????})
    };
  },
  },
  getDataSource: function(self, barcodes: Array<any>): ListView.DataSource {
    console.log("update");
    return self.state.dataSource.cloneWithRows(barcodes);
  },
  render: function() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
      />
    );
  },
});
module.exports = BarcodeList;

我是新来的反应-和javascript，所以也许这是显而易见的，但我不知道如何使它。

提前感谢

因为需要异步获取数据，所以应该设置初始数据，如下所示：

getInitialState() {
  dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
}

在componentDidMount中，你应该运行获取数据的函数，一旦你有了数据，你就应该做一些类似的事情

this.setState({dataSource: state.dataSource.cloneWithRows(arrayOfBarcodes)})

您的列表将使用正确的数据自动重新渲染。

您可以（也可能应该）在获取数据时显示一个微调器。因此，只需在初始状态中添加类似loaded: false的内容，然后当您从DB中获得数据时，也将loaded设置为true：

this.setState({
  dataSource: state.dataSource.cloneWithRows(arrayOfBarcodes),
  loaded: true
})

然后在渲染方法中执行类似的操作

render() {
  if (this.state.loaded) {
     this.renderTheListView()
  }
  else {
     this.renderLoadingIndicator()
  }
}
相关文章：