RN listView使用
来源:互联网 发布:smtp.qq.com端口号 编辑:程序博客网 时间:2024/05/16 08:56
RN中的ListView是基于ScrollView扩展得来的,所以具有ScrollView的相关属性。
常用的属性:
initialListSize:指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据,而不是花费太多帧逐步显示出来
dataSource:数据源,类似于安卓中我们传入BaseAdapter的数据集合。
renderRow:渲染某一行,类似于BaseAdapter中的getItem方法。
onEndReached:简单说就是用于分页操作,在安卓中原生开发中,我们需要自己实现相应的方法。
onEndReachedThreshold:调用onEndReached之前的临界值,单位是像素。(默认值为1000)感觉这个1000设置很好,先如今用户不差流量,所以将体验做到最佳才是上上之策。
refreshControl:指定RefreshControl组件,用于为ScrollView提供下拉刷新功能。(该属性是继承与ScrollView)
renderHeader:渲染头部View,类似于安卓ListView中的addHeader.
renderFooter :渲染底部View,类似listView中的addFooter
renderSectionHeader :会为每个小节(section)渲染一个粘性的标题。
粘性是指当它刚出现时,会处在对应小节的内容顶部;继续下滑当它到达屏幕顶端的时候,它会停留在屏幕顶端,一直到对应的位置被下一个小节的标题占据为止。
<ListView dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} pageSize={3} refreshControl={ <RefreshControl onRefresh={this.onRefresh.bind(this)} refreshing={this.state.isLoading} colors={['#0000ff', '#00ff00', '#ff0000']} enabled={true} /> } />
定义listView的item:
renderRow(rowData, sectionID, rowID) { var _ = this;//这个this是通过上面this.renderRow.bind(this)传递过来的 let sepraView; {/*listView分割线*/} //这里没有使用rowData获取length(rowData代表一条数据) 而是_.props.data拿到数据源size if (rowID != _.props.data.length - 1) { sepraView = <View style={styles.separator}/> } return ( rowData? <View key={rowID} style={{marginLeft: 20}}> <View style={styles.contentContener}> <Text style={styles.name}>{rowDate.name}</Text> <Text style={styles.fontGray}>{rowData.desc}</Text> </View> {sepraView} </View> : <View></View> ) }
绑定数据源:
写法基本上是固定 没什么可说的
constructor(props) { super(props); let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { //this.props.data数据 dataSource: ds.cloneWithRows(this.props.data), }; }
0 0
- RN listView使用
- RN ListView 列表
- RN的listview Demo
- RN实现ListView
- 关于RN listview item ref
- RN 项目使用 stetho
- RN
- RN
- RN
- RN
- RN中UIImage的使用
- RN版本UITextFeild的使用
- RN点击事件的使用
- 《React-Native系列》16、 RN组件之ListView
- 《React-Native系列》16、 RN组件之ListView
- 《React-Native系列》16、 RN组件之ListView
- 《React-Native系列》16、 RN组件之ListView
- 个人经常使用的RN学习地址
- 代码书写规范
- RDS for MySQL 备份文件恢复到自建数据库遇到启动问题
- 搜狗输入法安装之后无法使用
- 小知识-MySql的读写分离
- 坚持
- RN listView使用
- android多进程
- C++ 标准库中的异常
- 设为首页的代码
- java.lang.RuntimeExceptionL:Parcel: unable to marshal val xxx类i
- 微信应用号(小程序)开发IDE配置
- 对rxjava的详细解析
- 数据库索引的实现原理
- CDH 5.X 卸载