React Native——组件FlatList
属性
添加头部组件
ListHeaderComponent
属性用来给FlatList添加头部组件
简单使用:
//ES6之前写法
_header = function () {
return (
<Text style={{fontWeight: 'bold', fontSize: 20}}>热门电影</Text>
);
} <FlatList
ListHeaderComponent={this._header}//header头部组件
/>
添加尾部组件
ListFooterComponent
属性为FlatList添加尾部组件,接收的参数跟ListHeaderComponent
相同。
//ES6的写法
_footer = () => (
<Text style={{fontSize: 14, alignSelf: 'center'}}>到底啦,没有啦!</Text>
) <FlatList
ListFooterComponent={this._footer} //添加尾部组件
/>
添加头部和尾部组件比较简单,需要注意的就是上边两者ES5和6写法的区别!
添加分割线
ItemSeparatorComponent
属性可以为FlatList列表之间添加分割线。
举个例子:
class ItemDivideComponent extends Component {
render() {
return (
<View style={{height: 1, backgroundColor: 'skyblue'}}/>
);
}
}; <FlatList
ItemSeparatorComponent={ItemDivideComponent}//分割线组件
/>
这里我们自定义了一个组件来设置分割线,当然我们像添加头部和尾部一样,在内部声明之后使用this._header
的写法也是可以的!
设置空数据视图
ListEmptyComponent
属性,可以为FlatList设置一个没有数据的时候展示的视图!,这个属性可以接收的参数类型比较多,可以是React Component
,也可以是一个render函数
,或者渲染好的element
。
所以设置空数据视图不仅可以像前边介绍的两种方式以外,还可以接收一个render函数
。
举个例子:
createEmptyView() {
return (
<Text style={{fontSize: 40, alignSelf: 'center'}}>还没有数据哦!</Text>
);
} <FlatList
ListEmptyComponent={this.createEmptyView()}
/>
设置item的key
在前一篇博客中,我们的设置data
的时候,是这样的:
data={[
{key: '大护法'},
{key: '绣春刀II:修罗战场'},
...
]}
类似{key:你的数据value}
这样的形式,是因为我们在设置data
的时候,必须要为item设置key
属性,否则会有一个黄色的警告弹出。而且我们需要注意的是这里每一个item的key
是唯一的!,如果按照这样的写法,我们在数据中有重复的,比如{key: '大护法'},{key: '大护法'}
,这里的大护法
只会显示一个,因为FlatList会认为这是一条数据,因为key
相同!
那么为什么会这样?
因为FlatList中有一个属性:keyExtractor
,用于为给定的item生成一个不重复的key。若不指定此函数,则默认抽取item.key作为key值。若item.key也不存在,则使用数组下标index。因为前边没有指定该属性,所以就把item.key
作为了key值,才会认定两个重复的数据是一条数据!
那么一般地,我们可以这样使用:
_keyExtractor = (item, index) => index; <FlatList
keyExtractor={this._keyExtractor}
/>
这样就把data
中数组的下标作为了唯一的key
。
那么在data
中指定数据的时候,就不用{key: '大护法'}
这样写了,因为我们已经指定了唯一的key,而可以随意写{name: '大护法'}
或者{movie: '大护法'}
,在渲染item的时候,取值用item.name
或者item.movie
即可!也不会有黄色的警告出现!
你明白了吗?
设置itemLayout
getItemLayout
属性是一个可选的优化,用于避免动态测量内容尺寸的开销。如果我们知道item的高度,就可以为FlatList指定这一个属性,来使FlatList更加高效的运行!
举个例子:
getItemLayout={(data, index) => ({
length: 44, offset: (44 + 1) * index, index
})}
我们在上边使用的时候指定了item的高度为44,所以length
参数为44;我们设置了分割线,且指定分割线的高度是1,所以offset
参数为44+1。综合来看,设置这个属性应这样写:
getItemLayout={(data, index) => ({
length: 你的item的height, offset: (你的item的height + ItemSeparator的height) * index, index
})}
设置这一属性,在调用FlatList的跳转函数的时候非常有用,否则可能会很卡顿!如scrollToEnd()
,scrollToIndex()
,这两个方法后边再说!
下拉刷新
FlatList中有两个属性,可以用来设置下拉刷新。
refreshing
在等待加载新数据时将此属性设为true,列表就会显示出一个正在加载的符号.onRefresh
如果设置了此选项,则会在列表头部添加一个标准的RefreshControl
控件,以便实现“下拉刷新”的功能。同时你需要正确设置refreshing
属性。
这里的RefreshControl
控件,非常类似于Android v4包中的SwipeRefreshLayout
,这里就不多说了,需要了解的可以查看相关文档!
如何使用,举个例子:
refreshing={this.state.refreshing}
onRefresh={() => {
this.setState({refreshing: true})//开始刷新
//这里模拟请求网络,拿到数据,3s后停止刷新
setTimeout(() => {
alert('没有可刷新的内容!');
this.setState({refreshing: false});//停止刷新
}, 3000);
}}
上拉加载
关于上拉加载,FlatList也封装有两个属性来实现:
onEndReachedThreshold
:这个属性决定当距离内容最底部还有多远时触发onEndReached回调。需要注意的是此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。所以它的取值范围为:(0,1),不包含0和1。onEndReached
:列表被滚动到距离内容最底部不足onEndReachedThreshold设置的的距离时调用。
具体使用,举个例子:
onEndReachedThreshold={0.1}
onEndReached={({distanceFromEnd}) => (
setTimeout(() => {
this.setState((state) => ({
data: state.data.concat(this._newData),
}));
}, 3000)
)}
这里我们设置的距离为列表可见长度的1/10,而触发了onEndReached函数时,我们设置了一个定时器,3s后,将data
中的数据添加了新数据,从而达到上拉加载更多的效果!
函数
介绍
FlatList下有两个比较常用的函数:
scrollToEnd() 滚动到底部。如果不设置getItemLayout属性的话,可能会比较卡。
scrollToIndex()如果不设置getItemLayout属性的话,无法跳转到当前可视区域以外的位置。
如官方所言,使用这两个函数的时候,最好指定设置getItemLayout
属性。
使用
因为这两个是FlatList组件的函数,所以在使用这两个函数之前,首先我们要得到FlatList组件的引用。
这时候就需要ref
属性。react提供的这个ref
属性,表示为对组件真正实例的引用。
关于ref
属性的使用,可以去React官网查看API!
具体的使用:
ref={(flatList) => this._flatList = flatList} this._flatList.scrollToEnd(); //viewPosition参数:0表示顶部,0.5表示中部,1表示底部
this._flatList.scrollToIndex({viewPosition: 0, index: this.state.text});
至此,关于FlatList进阶的相关基础内容就说完了!
完整的Demo
class FlatListTest extends Component {
constructor(props) {
super(props);
this.state = {
data: this._sourceData,
refreshing: false, //初始化不刷新
text: ''//跳转的行
};
} _header = function () {
return (
<Text style={{fontWeight: 'bold', fontSize: 20}}>热门电影</Text>
);
} _footer = () => (
<Text style={{fontSize: 14, alignSelf: 'center'}}>到底啦,没有啦!</Text>
) createEmptyView() {
return (
<Text style={{fontSize: 40, alignSelf: 'center'}}>还没有数据哦!</Text>
);
} //此函数用于为给定的item生成一个不重复的key
//若不指定此函数,则默认抽取item.key作为key值。若item.key也不存在,则使用数组下标index。
_keyExtractor = (item, index) => index; itemClick(item, index) {
alert('点击了第' + index + '项,电影名称为:' + item.name);
} _renderItem = ({item, index}) => {
return (
<TouchableOpacity
activeOpacity={0.5}
onPress={this.itemClick.bind(this, item, index)}>
<Text style={flatListStyles.item}>{item.name}</Text>
</TouchableOpacity>
);
} //点击按钮跳转
onButtonPress() {
//viewPosition参数:0表示顶部,0.5表示中部,1表示底部
this._flatList.scrollToIndex({viewPosition: 0, index: this.state.text});
//this._flatList.scrollToOffset({ animated: true, offset: 2000 });
}; onBtnPress2Botton() {
this._flatList.scrollToEnd();
} _sourceData = [
{name: '大护法'},
{name: '绣春刀II:修罗战场'},
{name: '神偷奶爸3'},
{name: '神奇女侠'},
{name: '摔跤吧,爸爸'},
{name: '悟空传'},
{name: '闪光少女'},
{name: '攻壳机动队'},
{name: '速度与激情8'},
{name: '蝙蝠侠大战超人'},
{name: '攻壳机动队'},
{name: '速度与激情8'},
{name: '蝙蝠侠大战超人'}
] _newData = [{name: '我是新添加的数据1'},
{name: '我是新添加的数据2'},
{name: '我是新添加的数据3'}] render() {
return (
<View style={flatListStyles.container}>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<TextInput
style={{flex: 1}}
placeholder="请输入要跳转的行号"
onChangeText={(text) => this.setState({text})}
/>
<Button title="跳转到行" onPress={this.onButtonPress.bind(this)} color={'skyblue'}/>
<Button title="跳转到底部" onPress={this.onBtnPress2Botton.bind(this)} color={'green'}/> </View>
<FlatList
data={this.state.data}
//使用 ref 可以获取到相应的组件
ref={(flatList) => this._flatList = flatList}
ListHeaderComponent={this._header}//header头部组件
ListFooterComponent={this._footer}//footer尾部组件
ItemSeparatorComponent={ItemDivideComponent}//分割线组件
//空数据视图,可以是React Component,也可以是一个render函数,或者渲染好的element。
ListEmptyComponent={this.createEmptyView()}
keyExtractor={this._keyExtractor}
//是一个可选的优化,用于避免动态测量内容尺寸的开销,不过前提是你可以提前知道内容的高度。
//如果你的行高是固定的,getItemLayout用起来就既高效又简单.
//注意如果你指定了SeparatorComponent,请把分隔线的尺寸也考虑到offset的计算之中
getItemLayout={(data, index) => ( {length: 44, offset: (44 + 1) * index, index} )}
//决定当距离内容最底部还有多远时触发onEndReached回调。
//注意此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。
onEndReachedThreshold={0.1}
//当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用
onEndReached={({distanceFromEnd}) => (
setTimeout(() => {
this.setState((state) => ({
data: state.data.concat(this._newData),
}));
}, 3000)
)}
refreshing={this.state.refreshing}
onRefresh={() => {
this.setState({refreshing: true})//开始刷新
//这里模拟请求网络,拿到数据,3s后停止刷新
setTimeout(() => {
alert('没有可刷新的内容!');
this.setState({refreshing: false});
}, 3000);
}}
renderItem={this._renderItem}
/>
</View>
);
}
}
; class ItemDivideComponent
extends Component {
render() {
return (
<View style={{height: 1, backgroundColor: 'skyblue'}}/>
);
}
}
; const flatListStyles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
}) AppRegistry.registerComponent('AwesomeProject', () => FlatListTest);
React Native——组件FlatList的更多相关文章
- React Native之FlatList的介绍与使用实例
React Native之FlatList的介绍与使用实例 功能简介 FlatList高性能的简单列表组件,支持下面这些常用的功能: 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件 ...
- React Native组件之Text
React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
- React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- react native组件的生命周期
react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...
- react native组件的创建
react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...
- React Native组件(三)Text组件解析
相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...
- React Native组件(二)View组件解析
相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...
随机推荐
- Luogu P1477 [NOI2008]假面舞会
一道非常神奇的图论题解法无比新奇清新 我们首先把图分成三种情况: 有环的,此时答案一定是环长的因数(否则不能满足题意) 存在入度大于1的DAG图的 一棵树/一条链 很容易发现,最后一种情况想怎么取就怎 ...
- Verilog设计Valid-Ready握手协议
转自http://ninghechuan.com 我不生产知识,我只是知识的搬运工. Handshake Protocol握手协议!为了保证数据传输过程中准确无误,我们需要加上握手信号来控制信号的传输 ...
- 案例学python——案例一:抓图
最近项目不那么紧张,有时间来研究一下Python,先前断断续续的自学了一段时间,有些浅基础.刚好在码云上看到比较适合的案例,跟着案例再往前走一波. 案例一:爬虫抓图 开发工具:PyCharm 脚 ...
- springboot 中事件监听模型的一种实现
目录 定义事件本身 定义事件源 定义监听者 一.需要实现 ApplicationListener 二.使用 @EventListener 注解 测试 项目结构 前言: 事件监听模型是一种常用的设计模式 ...
- 手动编写的几个简单的puppet管理配置
puppet在自动化配置管理方面有很强大的优势,这里就不做过多介绍了,下面记录下几个简单的puppet管理配置: 一.首先在服务端和客户端安装puppet和facter 1)服务端 安装Puppet ...
- Python-注册登陆-20
username = input('请输入你要注册的用户名:') password = input('请输入你要注册的密码:') with open('list_of_info',mode='w',e ...
- Notes of Daily Scrum Meeting(12.24)
平安夜了,我们还在这里辛苦地赶代码,整个人都不好了... 今天的团队任务总结如下: 团队成员 今日团队工作 陈少杰 寻找大神帮助,调试网络连接 王迪 建立搜索的UI界面,把算法加入进去 金鑫 调试网络 ...
- 软工个人博客作业Week 1
问题1:在瀑布模型中提到模型,模型(模拟版本)和原型有什么不同,如果与原型有同样的功能,那为什么称之为模型?如果没有同样的功能,又是怎么测试那些程序的? 问题2:怎样才能高效率的广泛而深入地了解用户的 ...
- BugPhobia团队篇章:团队管理与Github源代码管理说明
0x00:序言 To the searching tags, you may well fall in love withhttp://xueba.nlsde.buaa.edu.cn/ 再见,无忧时光 ...
- Windows环境搭建mysql服务器
Windows环境搭建mysql服务器: 1.下载mysql-installer-community-5.7.3.0-m13.2063434697并安装 安装详细步骤>> 2.安装mys ...