您的位置:首页 > Web前端 > React

react native 中的ListView

2017-01-18 15:17 274 查看
ListView 的运用:

1、首先在react native中引入这个组件;

2、初始化的ListView 的相关属性:

constructor(props) {
super(props);
const ds= new ListView.DataSource({rowHasChanged:(r1,r2)=>r1 !== r2 });
this.state={
dataSource: ds.cloneWithRows(news)
};
}


在这里 news 中的数据可以是定义的固定的数值,也可以是网络请求获取的数据

constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state={
length:'',
dataSource: ds.cloneWithRows(this._genRows)//下面的函数作用就是返回一个数据,并且数组的形式返回描述的内容
};
}


3、根据网路请求的成功与否,判断是转圈还是显示数据,return不同的view

4、ListView 的编写

<ListView
initialListSize={6}
dataSource={this.state.dataSource}
renderRow={this._renderRow.bind(this)}
renderHeader={this._renderHeader.bind(this)}
pageSize={1} //每次加载完渲染几行
enableEmptySections = {true}

/>


其中 renderHeader 可以编写list的导航栏
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: