ReactNative之FlatList的具体使用方法


Posted in Javascript onNovember 29, 2017

之前使用的组件是ListView,当时要添加一个下拉刷新,上拉加载的功能,所以对ListView做了一些封装,但是后来看官方文档,不建议再使用ListView,因为效率问题,做过Android的朋友都知道,Android的ListView如果不自己处理一下,也是有效率问题的。所以官方又推出了FlatList,而且自带上拉下拉的功能。

功能简介

  1. 完全跨平台。
  2. 支持水平布局模式。
  3. 行组件显示或隐藏时可配置回调事件。
  4. 支持单独的头部组件。
  5. 支持单独的尾部组件。
  6. 支持自定义行间分隔线。
  7. 支持下拉刷新。
  8. 支持上拉加载。
  9. 支持跳转到指定行(ScrollToIndex)。

如果需要分组/类/区(section),请使用SectionList(这个我们会在之后的文章中介绍)

使用

FlatList如果只做简单使用也是很简单的,这里我们会分难以程度,逐渐介绍:

直接使用

<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>

可以看出跟之前的ListView很像,但是其中少了dataSource,这里,我们只需要传递数据,其它的都交给FlatList处理好了。

属性说明

  1. ItemSeparatorComponent行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。在这里可以根据需要插入一个view
  2. ListEmptyComponent列表为空时渲染该组件。可以是React Component, 也可以是一个render函数, 或者渲染好的element。
  3. ListFooterComponent尾部组件
  4. ListHeaderComponent头部组件
  5. columnWrapperStyle如果设置了多列布局(即将numColumns值设为大于1的整数),则可以额外指定此样式作用在每行容器上。
  6. data为了简化起见,data属性目前只支持普通数组。如果需要使用其他特殊数据结构,例如immutable数组,请直接使用更底层的VirtualizedList组件。
  7. extraData如果有除data以外的数据用在列表中(不论是用在renderItem还是Header或者Footer中),请在此属性中指定。同时此数据在修改时也需要先修改其引用地址(比如先复制到一个新的Object或者数组中),然后再修改其值,否则界面很可能不会刷新。
  8. getItem获取每个Item
  9. getItemCount获取Item属相
  10. getItemLayout是一个可选的优化,用于避免动态测量内容尺寸的开销,不过前提是你可以提前知道内容的高度。如果你的行高是固定的getItemLayout用起来就既高效又简单,类似下面这样:getItemLayout={(data, index) => ( {length: 行高, offset: 行高 * index, index} )}注意如果你指定了SeparatorComponent,请把分隔线的尺寸也考虑到offset的计算之中。
  11. horizontal设置为true则变为水平布局模式。
  12. initialNumToRender指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证用户执行返回顶部的操作时,不需要重新渲染首批元素。
  13. initialScrollIndex指定渲染开始的item index
  14. keyExtractor此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染的开销。若不指定此函数,则默认抽取item.key作为key值。若item.key也不存在,则使用数组下标。
  15. legacyImplementation设置为true则使用旧的ListView的实现。
  16. numColumns多列布局只能在非水平模式下使用,即必须是horizontal={false}。此时组件内元素会从左到右从上到下按Z字形排列,类似启用了flexWrap的布局。组件内元素必须是等高的——暂时还无法支持瀑布流布局。
  17. onEndReached当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
  18. onEndReachedThreshold决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。
  19. onRefresh如果设置了此选项,则会在列表头部添加一个标准的RefreshControl控件,以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
  20. onViewableItemsChanged在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityconfig属性
  21. refreshing在等待加载新数据时将此属性设为true,列表就会显示出一个正在加载的符号。
  22. renderItem根据行数据data,渲染每一行的组件。这个参照下面的demo
  23. viewabilityConfig请参考ViewabilityHelper 的源码来了解具体的配置。

方法

scrollToEnd
滚动到底部。如果不设置getItemLayout
属性的话,可能会比较卡。

scrollToIndex
滚动到指定index的item
如果不设置getItemLayout
属性的话,无法跳转到当前可视区域以外的位置。

scrollToItem
滚动到指定item,如果不设置getItemLayout
属性的话,可能会比较卡。

scrollToOffset
滚动指定距离

Demo:

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  FlatList,
  Text,
  Button,
} from 'react-native';

var ITEM_HEIGHT = 100;

export default class FlatListDemo extends Component {

  _flatList;

  _renderItem = (item) => {
    var txt = '第' + item.index + '个' + ' title=' + item.item.title;
    var bgColor = item.index % 2 == 0 ? 'red' : 'blue';
    return <Text style={[{flex:1,height:ITEM_HEIGHT,backgroundColor:bgColor},styles.txt]}>{txt}</Text>
  }

  _header = () => {
    return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是头部</Text>;
  }

  _footer = () => {
    return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是尾部</Text>;
  }

  _separator = () => {
    return <View style={{height:2,backgroundColor:'yellow'}}/>;
  }

  render() {
    var data = [];
    for (var i = 0; i < 100; i++) {
      data.push({key: i, title: i + ''});
    }

    return (
      <View style={{flex:1}}>
        <Button title='滚动到指定位置' onPress={()=>{
          //this._flatList.scrollToEnd();
          //this._flatList.scrollToIndex({viewPosition:0,index:8});
          this._flatList.scrollToOffset({animated: true, offset: 2000});
        }}/>
        <View style={{flex:1}}>
          <FlatList
            ref={(flatList)=>this._flatList = flatList}
            ListHeaderComponent={this._header}
            ListFooterComponent={this._footer}
            ItemSeparatorComponent={this._separator}
            renderItem={this._renderItem}

            //numColumns ={3}
            //columnWrapperStyle={{borderWidth:2,borderColor:'black',paddingLeft:20}}

            //horizontal={true}

            //getItemLayout={(data,index)=>(
            //{length: ITEM_HEIGHT, offset: (ITEM_HEIGHT+2) * index, index}
            //)}

            //onEndReachedThreshold={5}
            //onEndReached={(info)=>{
            //console.warn(info.distanceFromEnd);
            //}}

            //onViewableItemsChanged={(info)=>{
            //console.warn(info);
            //}}
            data={data}>
          </FlatList>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  txt: {
    textAlign: 'center',
    textAlignVertical: 'center',
    color: 'white',
    fontSize: 30,
  }
});

效果图:

ReactNative之FlatList的具体使用方法

进阶使用

在这里我准备了一份代码示例:

const {width,height}=Dimensions.get('window')
export default class Main extends Component{
  // 构造
  constructor(props) {
    super(props);
  }
  refreshing(){
    let timer = setTimeout(()=>{
          clearTimeout(timer)
          alert('刷新成功')
        },1500)
  }
  _onload(){
    let timer = setTimeout(()=>{
      clearTimeout(timer)
      alert('加载成功')
    },1500)
  }
  render() {
    var data = [];
    for (var i = 0; i < 100; i++) {
      data.push({key: i, title: i + ''});
    }

    return (
      <View style={{flex:1}}>
        <Button title='滚动到指定位置' onPress={()=>{
          this._flatList.scrollToOffset({animated: true, offset: 2000});
        }}/>
        <View style={{flex:1}}>
          <FlatList
            ref={(flatList)=>this._flatList = flatList}
            ListHeaderComponent={this._header}
            ListFooterComponent={this._footer}
            ItemSeparatorComponent={this._separator}
            renderItem={this._renderItem}
            onRefresh={this.refreshing}
            refreshing={false}
            onEndReachedThreshold={0}
            onEndReached={
              this._onload
            }
            numColumns ={3}
            columnWrapperStyle={{borderWidth:2,borderColor:'black',paddingLeft:20}}

            //horizontal={true}

            getItemLayout={(data,index)=>(
            {length: 100, offset: (100+2) * index, index}
            )}

            data={data}>
          </FlatList>
        </View>

      </View>
    );
  }


  _renderItem = (item) => {
    var txt = '第' + item.index + '个' + ' title=' + item.item.title;
    var bgColor = item.index % 2 == 0 ? 'red' : 'blue';
    return <Text style={[{flex:1,height:100,backgroundColor:bgColor},styles.txt]}>{txt}</Text>
  }

  _header = () => {
    return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是头部</Text>;
  }

  _footer = () => {
    return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是尾部</Text>;
  }

  _separator = () => {
    return <View style={{height:2,backgroundColor:'yellow'}}/>;
  }


}
const styles=StyleSheet.create({
  container:{

  },
  content:{
    width:width,
    height:height,
    backgroundColor:'yellow',
    justifyContent:'center',
    alignItems:'center'
  },
  cell:{
    height:100,
    backgroundColor:'purple',
    alignItems:'center',
    justifyContent:'center',
    borderBottomColor:'#ececec',
    borderBottomWidth:1

  },
  txt: {
    textAlign: 'center',
    textAlignVertical: 'center',
    color: 'white',
    fontSize: 30,
  }

})

运行效果如下:

ReactNative之FlatList的具体使用方法

总结

总体来说Flatlist还是比ListView用起来方便的,而且提供的功能更多。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
屏蔽Flash右键信息的js代码
Jan 17 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 #Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 #jQuery
jquery animate动画持续运动的实例
Nov 29 #jQuery
angularjs实现时间轴效果的示例代码
Nov 29 #Javascript
bootstrap响应式工具使用详解
Nov 29 #Javascript
JavaScript的setter与getter方法
Nov 29 #Javascript
解析Vue 2.5的Diff算法
Nov 28 #Javascript
You might like
PHP的变量总结 新手推荐
2011/04/18 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
django实现分页的方法
2015/05/26 Python
Python读取键盘输入的2种方法
2015/06/16 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
python如何让类支持比较运算
2018/03/20 Python
Python unittest模块用法实例分析
2018/05/25 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
中文系师范生自荐信
2013/10/01 职场文书
团代会主持词
2014/04/02 职场文书
经营管理策划方案
2014/05/22 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书