React Native FlatList的使用

FlatList的使用

• 高性能的简单列表组件，支持下面这些常用的功能：
• 完全跨平台。
• 支持水平布局模式。
• 行组件显示或隐藏时可配置回调事件。
• 支持单独的头部组件。
• 支持单独的尾部组件。
• 支持自定义行间分隔线。
• 支持下拉刷新。
• 支持上拉加载。
• 支持跳转到指定行（ScrollToIndex）。

如果需要分组/类/区（section），请使用<SectionList> 。

建议以后尽量少使用ListView，毕竟性能不如FlatList

使用方便简单，如下：

import React, { Component } from 'react'
import {
    View,
    Image,
    Dimensions,
    ScrollView,
    Text,
    StyleSheet,
    TouchableOpacity,
    Button,
    FlatList,
    ActivityIndicator,
    RefreshControl,
}from 'react-native'

var flatListData = [{
        key: 'a',
        text: '444'
    },{
        key: 'b',
        text: '333'
    },{
        key: 'c',
        text: '2222'
    },{
        key: 'd',
        text: '111'
    }];

class DetailePageextends Component {

     constructor(props) {
        super(props);

        this.state = {

        };
    }

    render() {
        const { params } = this.props.navigation.state;
        return (

            <View style={styles.container}>

                <FlatList
                    style={styles.flatListStyle}
                    data={flatListData}
                    ListHeaderComponent={this.ListHeaderComponent.bind(this)}
                    renderItem={this.renderItem.bind(this)}
                    keyExtractor={this._keyExtractor}
                    refreshControl={
                        <RefreshControl
                            refreshing={false}
                        />
                    }
                />      
            </View>

        )
    }


  //此函数用于为给定的item生成一个不重复的key
    _keyExtractor = (item, index) => item.key;

    componentDidMount() {

    }

    //列表的头部
    ListHeaderComponent() {
        return (
            <DetailsHeadItem titleName='学习' unitName='111'/> 
        )
    }

    //列表的每一行
    renderItem({item,index}) {
        return (
            <TouchableOpacity key={index} activeOpacity={1} onPress={this.clickItem.bind(this,item,index)}>
                <DetaileRowItem  /> 
            </TouchableOpacity>
        )
    }
    //绘制列表的分割线
    renderItemSeparator(){

    }

    //点击列表点击每一行
    clickItem(item,index) {
        alert(index)
    }

}

export default DetailePage