FlatList的使用(一)

目前新版的react native已经都用FlatList代替了ListView。所以有必要学习下FlatList都具体用法。官方中文网描述如下：

高性能的简单列表组件，支持下面这些常用的功能：

完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。
支持跳转到指定行（ScrollToIndex）。
支持多列布局

实现代码如下：

import React, { Component } from 'react';
import {
AppRegistry,
FlatList,
View,
Button,
Image,
StyleSheet,
Text,
TouchableOpacity,
Dimensions,
Alert

} from 'react-native';

class myapp extends React.PureComponent {

_flatList;

constructor(props) {
super(props);
this.state = {
refer: false,
}
}

footView = () => {
return (
<View style={{flex: 1, flexDirection:'row',justifyContent: 'center',backgroundColor: '#a1f11a',alignItems: 'center',height:44}}>
<Text>加载完毕</Text>
</View>
)
};

renderItemView = (item) => {
return (

<View style={styles.item_view}>
<View>
<Image
style={styles.item_view_img}
source={{uri: 'https://img-blog.csdnimg.cn/20190323161354536.png'}}/>
</View>

<View style={styles.item_text_view}>
<Text style={styles.item_view_text}>{item.title}</Text>
<Text style={styles.item_view_text} numberOfLines={10} >{item.content}</Text>
</View>

</View>
)
};

separatorView = () => {
return (
<View style={{flex: 1, backgroundColor: '#ff0000', height: 1}}>

</View>
)
};

onRefresh = () => {
this.setState({
refer: true,
});
this.timer = setTimeout(
()=>{
console.log('刷新结束');
this.setState({
refer: false,
});
},
2000
);
};

componentWillUnmount() {
clearTimeout(this.timer)
}

render() {
var data = [];
for (var i=0; i<15; i++) {
data[i] = {key:i,title:'新闻标题'+i,content:'11111111111111111111新闻内容新闻内新闻闻内新闻1111速度速度速度达到速度速度速度颠三倒四内'+i}
}
return(

<View style={{backgroundColor: '#ffaaff', flex: 1, justifyContent: 'center'}}>
<FlatList ref={(flatList)=>this._flatList = flatList} style={{backgroundColor: '#fff', flex: 1, marginTop: 44}}
data={data}
renderItem={({item}) => this.renderItemView(item)}

ListFooterComponent = {this.footView}
ItemSeparatorComponent = {this.separatorView}

onViewableItemsChanged={(info)=>{
console.log(info);
}}
refreshing = {this.state.refer}
onRefresh={this.onRefresh}
onEndReachedThreshold={0.0000001}
onEndReached={(info) => {
Alert.alert('加载完毕');
} }
/>

</View>

)
}
}

const styles = StyleSheet.create({

item_view: {
width: Dimensions.get('window').width,
flex: 1,
flexDirection:'row',
alignItems: 'center',
height: 80,

},
item_view_img:{
marginLeft: 10,
width: 60,
height: 60
},
item_text_view:{
marginLeft: 20
},
item_view_text:{
paddingRight: 70
}

});

export default myapp;

FlatList的使用(一)相关推荐

记一个开发中遇到react-native flatList 的坑
因項目需求封装了一个 View 作为 react native flatList 的 item, 在原生 View 有方法响应需要传递到到 RN, 然后出现一个闪退问题: 在滑到最后在滑回来, 滑到 ...
React Native学习（七）—— FlatList实现横向滑动列表效果
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
react native 中下拉列表FlatList组件的讲解以及实例demo
RN中的下拉列表组件.以前RN的下拉列表是listView,但是这个组件的性能不咋地.当数据较多的时候就会很卡.所以RN就新出了一个FaltList组件来代替它.这里我们简单总结一下新的下拉组件. 一 ...
react-native flatlist 上拉加载onEndReached方法频繁触发的问题
问题在写flatlist复用组件时,调用的时候如果父组件是不定高的组件,会造成组件无法显示如果父组件样式{flex:1},则会出现下拉方法频繁触发或不正常触发的问题(我这里出现的问题是在列表第6个 ...
React Native 实现FlatList的下拉刷新上拉加载
RN对列表已经实现了下拉刷新与上拉加载的功能,但是为了更好用,做了封装. 实现的功能: 1.下拉刷新,使用原生下拉头. 2.上拉加载,自定义加载布局. 3.处理了重复刷新或重复 ...
ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版
ReactNative简介: ReactNative是基于React语法来进行开发移动app的框架: ReactNative中提供了移动端专用的一些组件,我们要使用ReactNative固有的组件代替 ...
如何构建具有实时搜索功能的React Native FlatList
by Vikrant Negi 通过Vikrant Negi 如何构建具有实时搜索功能的React Native FlatList (How to build a React Native FlatL ...
ListView vs FlatList vs RecyclerListView性能对比
前言长列表或者无限下拉列表是最常见的应用场景之一.React Native在0.43版本之前写列表需要使用ListView,ListView存在性能问题,API也不友好,所以官方在0.43版本推出了 ...
React Native FlatList和SectionList列表组件
FlatList 之前使用的组件是ListView,当时要添加一个下拉刷新,上拉加载的功能,所以对ListView做了一些封装,但是后来看官方文档,不建议再使用ListView,因为效率问题,做过An ...
关于ReactNative0.56版本Flatlist列表内容跳动的问题
Reactnative的版本升级一直是一个工作量比较的大的事情,每次升级都可能伴随着很多的坑. 前段时间在升级到0.56版本的时候发现一个问题,在flatlist使用中,加载多页后,列表项内容开始进行 ...

FlatList的使用(一)

FlatList的使用(一)相关推荐

最新文章

热门文章