Question

我已经开始开发一个react本机应用程序，我的listview初始化有问题。

我使用react-native-db-models插件来存储和检索我的数据

问题是我想在反应列表视图的getInitialState函数中获取数据，我需要调用回调函数..

这是我的类的代码，用于从db：

中检索我的数据

'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;

这是我的listview代码：

'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，所以也许这很明显，但我不知道如何制作它......

提前致谢

Answer 1

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

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

在componentDidMount中你应该运行获取数据的函数，一旦你拥有它们，你应该做类似的事情

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

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

您可以（并且可能应该）在获取数据时显示微调器。所以只需添加类似loaded: false的初始状态，然后当你从数据库集中获取数据时，加载为true：

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

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

的操作

render() {
  if (this.state.loaded) {
     this.renderTheListView()
  }
  else {
     this.renderLoadingIndicator()
  }
}

ReactNative listview初始状态

1 个答案: