react native 中的ListView
2017-01-18 15:17
274 查看
ListView 的运用:
1、首先在react native中引入这个组件;
2、初始化的ListView 的相关属性:
在这里 news 中的数据可以是定义的固定的数值,也可以是网络请求获取的数据
3、根据网路请求的成功与否,判断是转圈还是显示数据,return不同的view
4、ListView 的编写
其中 renderHeader 可以编写list的导航栏
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的导航栏
相关文章推荐
- React Native学习笔记之--向原生应用中集成RN页面
- React Native(七):Android双击Back键退出应用
- React vs Angular 2: 冰与火之歌
- React +webpack 基础配置
- React-native打包遇到问题:Could not get BatchedBridge
- React Native开发之IDE(Atom+Nuclide)安装,运行,调试
- 为React Native开发写的JS和React入门知识
- react项目
- react生命周期方法
- webpack+react+antd 单页面应用实例
- react-native 之布局总结
- React Native升级指南|v0.40+升级适配经验与心得
- React Native 基本控件的使用
- react 生命周期
- React Router基础使用
- React 入门实例教程
- React Router基础使用
- React Native--flexbox
- React Router基础教程
- React Native如何添加自定义图标