RN listView使用
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)渲染一个粘性的标题。
粘性是指当它刚出现时,会处在对应小节的内容顶部;继续下滑当它到达屏幕顶端的时候,它会停留在屏幕顶端,一直到对应的位置被下一个小节的标题占据为止。
<ListViewdataSource={this.state.dataSource}renderRow={this.renderRow.bind(this)}pageSize={3}refreshControl={<RefreshControlonRefresh={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拿到数据源sizeif (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),};}
RN listView使用相关推荐
- React Native Android 应用层实战沦陷记
[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 一眨眼又一年快要过去了,原计划今年的最后一个小目标(React N ...
- React Native学习之 ListView 的简单使用
官方文档详细的介绍了ListView的使用方式. 在这里我简单的进行了实践,拉取网络数据进行显示,触底自动加载更多.代码非常简单,这里直接贴出来. import React, { Component ...
- rn 实现上下滑动选择列表_用大前端技术实现的一款仿Boss直聘app(已开源)
鱼哥从去年8月我参加GDD(谷歌开发者大会)后,Flutter在一年中,版本迭代频繁,很多没有的功能都逐渐有了,很多从事移动端开发的,目前面临巨大冲击,因为大前端不是喊口号,而是确实能有巨大优势.之前 ...
- flutter listview 滚动到底部_??一个高颜值Flutter版WanAndroid客户端
1. 前言 ❝ 项目地址: https://github.com/xfhy/WanAndroid-Flutter ❞ 前段时间抽了点业余时间学了点Flutter入门,打算写个简单项目练练手.说实话,只 ...
- Android图片爬虫,看妹纸神器项目源码,ListView单张图片查看
Android图片爬虫,看妹纸神器项目源码 刚自学完安卓,国庆7七天花了6天纯手写入门级app,从集成图片爬虫到整个项目结束真是一步一个坑. 整个项目没有用框架,都是手写纯属练手,项目中主要用到的技术 ...
- React Native 系列(七) -- ListView
前言 本系列是基于React Native版本号0.44.3写的.几乎所有的App都使用了ListView这种组件,这篇文章将学习RN中ListView的平铺样式和分组样式. ListView平铺样式 ...
- 通过学习RN技术,平常自己的一些笔记整理,希望借鉴
一.RN搭建开发环境 1.安装依赖软件: Node.js 8.3以上 D:\Program Files\nodejs\ Pytho ...
- 【苹果相册推送】软件安装表现到ListView中,把网络请求来的数据存储下来
推荐内容IMESSGAE相关 作者推荐内容 iMessage苹果推软件 *** 点击即可查看作者要求内容信息 作者推荐内容 1.家庭推内容 *** 点击即可查看作者要求内容信息 作者推荐内容 2.相册 ...
- RN如何实现一个ExpandableList(可展开列表)组件
前言 今天想跟大家分享一个用RN实现的组件 - ExpandableList.恩,没什么特殊的原因,只是因为最近有一个需求要用到这东西,而且RN没有提供现成的组件,所以很(不)开(得)心(已)地做了一 ...
- [转]Shared——RN如何实现一个ExpandableList(可展开列表)组件
作者:小石头若海 原文地址:https://segmentfault.com/a/1190000011754908 RN如何实现一个ExpandableList(可展开列表)组件 讨论与分析 首先,我 ...
最新文章
- 把button伪装成超链接
- NR 5G 关于gNB-CU和gNB-DU
- 2017中国大学生程序设计竞赛-哈尔滨站(2/13)
- Python-OpenCV基本操作cv2
- Ubuntu16.04 安装配置Caffe
- 直播预告 - 博时基金DevOps体系建设和自动化测试分享
- linux主频限制服务,linux抵御DDOS攻击 通过iptables限制TCP连接和频率
- 更新MySQL复制 自动监控脚本
- ranger管mysql_添加Kafka的Ranger访问权限策略
- NLP中的预训练方法总结 word2vec、ELMO、GPT、BERT、XLNET
- linux c文件处理命令
- Win Server 2016 安装 IIS 服务详细步骤-图文
- 软件测试——白盒测试
- roboware studio教程_Roboware 常见操作和问题
- jcabanillas/yii2-inspinia-asset composert 安装失败
- react-native实现支付宝支付
- EA建模-绘制活动图
- linux设置搜狗输入法,Ubuntu系统安装和使用搜狗输入法
- python使用docx模块读写docx文件的方法与docx模块常用方法详解
- 因果推断笔记—— 相关理论:Rubin Potential、Pearl、倾向性得分、与机器学习异同(二)