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>        );    }}