ReactNative列表视图初始状态
ReactNative listview initial state
我已经开始开发一个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()
}
}
相关文章:
- 在Redux中链接async和sync操作以计算初始状态
- React + Flux:将初始状态引入存储
- 你能,或者应该在Redux'中使用localStorage吗;s的初始状态
- javascript关闭以记住初始状态
- 在两个或多个 UL 列表之间切换,如果单击一个列表,则其他列表会自动以初始状态返回,就像从未单击过一样
- ReactJs:如何在渲染组件时传递初始状态
- UI 路由器不断重定向到索引,并且不加载状态/视图
- 如何将 redux 状态返回到初始状态
- 停止无限CSS3动画并平滑恢复到初始状态
- 将高图重置为初始状态
- 如何将 DOM 状态重置为初始状态(首次接收页面时?
- 高图表 将向下钻取(三层)重置为初始状态
- 是否可以在单击时将类(特别是其动画)重置回其初始状态
- Backbone.Layoutmanager 尝试初始化视图时出错
- ReactJS中初始状态的未定义值
- 如何基于Rx.ReplaySubject模型在React中设置初始状态
- javascript/jquery stop按钮将播放按钮更改为初始状态而不是暂停
- 要在其中设置动画的元素的初始状态
- 使用“:悬停”;并使其恢复到它's较小(初始状态)
- ReactNative列表视图初始状态