FlatList测试
来源:互联网 发布:传奇mac 编辑:程序博客网 时间:2024/06/07 03:23
import React,{Component} from 'react';import { View,Text,FlatList} from 'react-native';const data = [ {key:'a',text:'jiangzhixi'}, {key:'b',text:'jiangdonlin'}, {key:'c',text:'huqianlong'}, ];const dataone = [{key: 'a',title:'aa'}, {key: 'b',title:'ba'}];class Separator extends Component{ render(){ return ( <Text> ---</Text> ); }}export default class TestList extends Component{ _renderItem(item){ return ( <View> <Text>{item.text}</Text> </View> ) } _separator(){ return <Separator />; } _headComp(){ return <Text>我是头</Text> } _endComp(){ return <Text>我是end</Text> } _keyExtractor(item, index){ console.log(item);//这里的item就是data里的每一项 console.log(index);//index就是每一项的索引 } render(){ return ( <View> <FlatList data={data} horizontal={false} initialNumToRender={3} ItemSeparatorComponent={this._separator} ListHeaderComponent={this._headComp} ListFooterComponent={this._endComp} refreshing={true} renderItem={({item}) => this._renderItem(item)} keyExtractor={this._keyExtractor} /> </View> ); }}
阅读全文
1 0
- FlatList测试
- FlatList的点击Demo
- react native FlatList 使用详解
- React Native学习五- FlatList
- React Native FlatList的使用
- ReactNative进阶---FlatList(一)
- ReactNative进阶---FlatList(二)
- ReactNative进阶---FlatList(三)
- ReactNative之FlatList组件使用方法总结
- pullview使用flatlist下拉上拉
- React Native之FlatList,listview的升级版
- React Native之FlatList,listview的升级版
- listView和FlatList的flexGrow默认值为1
- ReactNative FlatList state更新,视图不更新的问题
- 关于RN中FlatList的一些东西,以及FlatList为什么会得到多个只显示几个信息的原因
- 一起学react native(5) mobx配合FlatList实现高性能im聊天界面
- react native FlatList使用详解以及上拉刷新下拉加载带可运行demo
- React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现
- 架构师养成之路(1)--- 58专家解读架构师之路:这些才是架构师成功的标配!
- Convolutional Pose Machines
- CodeForces839A Arya and Bran
- 爬取网站使用代理IP
- HDU6129 Just do it
- FlatList测试
- PinPoint使用教程
- 数据结构实验之查找五:平方之哈希表
- MyBatis入门教程
- Protostuff序列化
- 基于hadoop2.2的namenode与SecondaryNameNode分开配置在不同的计算机
- JAVA中上转型对象的详细解释
- 如何相互转换逗号分隔的字符串和List (Java程序员日记 2015/03/06)
- 比较全面的正则表达式使用教程