FlatList列表组件详解

介绍FlatList

FlatList是类似Android中的ListView，实质是基于<VirtulizedList>组件的封装。一个高性能的，用于渲染的列表组件，支持以下功能。

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

属性

• ItemSeparatorComponent - 行与行之间的分隔线

_renderItemSeparatorComponent = () => (
   <View style={{ height:1, backgroundColor:'#c2c3c4' }}></View>
);
<FlatList
  data={[{key: 'a', goods: 'banner'}, {key: 'b', goods: 'apple'}]}
  renderItem={({item}) => <Text>{item.goods}</Text>}
  ItemSeparatorComponent={ this._renderItemSeparatorComponent }
/>

• ListFooterComponent - 尾部组件

_renderFooter = () => (
    <View>
        <Text>
            甄选好货
        </Text>
    </View>
)
<FlatList
  data={[{key: 'a', goods: 'banner'}, {key: 'b', goods: 'apple'}]}
  renderItem={({item}) => <Text>{item.goods}</Text>}
  ListFooterComponent={ this._renderFooter }
/>

• ListHeaderComponent - 头部组件

_renderHeader = () => (
    <View>
        <Text>
            甄选好货
        </Text>
    </View>
)
<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
  ListHeaderComponent={ this._renderHeader }
/>

• ListEmptyComponent - 列表为空时呈现的内容

_renderEmptyComponent = () => (
    <View>
        <Text>
            数据为空啦！不存在的！
        </Text>
    </View>
)
<FlatList
  data={[{key: 'a', goods: 'banner'}, {key: 'b', goods: 'apple'}]}
  renderItem={({item}) => <Text>{item.goods}</Text>}
  ListFooterComponent={ this._renderEmptyComponent }
/>

• data - 数据源
• renderItem - 列表呈现方式
• extraData - 用于告诉列表重新渲染，因为它实现了PureComponent，但是props浅拷贝是不会重新渲染的
• onEndReached - 下拉加载触发的函数
• onEndReachedThreshold - 决定当距离内容最底部还有多远时触发onEndReached回调
• onRefresh - 上拉刷新触发的函数
• refreshing - 在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号

方法

• scrollToEnd
• scrollToIndex
• scrollToItem
• scrollToOffset

实战部分

实现上拉刷新，下拉加载，导航条渐隐的效果

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

type Props = {}
type State = {}
const CITY_NAMES = ['杭州', '北京', '扬州', '昌江', '玉泉', '天津', '达州', '蹒跚', '沧州']
export default class App extends Component<Props, State> {
    static navigationOptions = ({ navigation }) => ({
        header:null,
    })
    constructor(props){
        super(props)
        this.state = {
            opacity:0,
            refreshing: false,
            isFooterLoading: false,
            dataArray: CITY_NAMES,
        }
    }
    _renderItem(data){
        return (
            <View style={styles.item}>
                <Text style={styles.text}>
                    {data.item}
                </Text>
            </View>
        )
    }
    loadData(){
        this.setState({
            refreshing: true
        });
        setTimeout(() => {
            let dataNewArray = ['九阳', '榨汁', '机器']
            this.setState({
                dataArray: dataNewArray,
                refreshing: 发蓝色,
            })
        }, 1500);
    }
    _onEndReached(){
        this.setState({
            isFooterLoading: true
        });
        setTimeout(() => {
            let dataArray = ['九阳', '榨汁', '机器']
            this.setState({
                dataArray: this.state.dataArray.concat(dataArray)
                isFooterLoading: true
            })
        }, 2000);
    }
    genIndicator(){
        return (
            <View>
                <ActivityIndicator
                    animating={this.state.isFooterLoading}
                />
                <Text>加载更多...</Text>
            </View>
        )
    }
    onScroll = (e) => {
        let offsetY = e.nativeEvent.contentOffset.y;
        if(y < 10){
            this.setState({
                opacity: 0
            })
        }else if(y <= 70 && y >= 10){
            this.setState({
                opacity: y/100
            })
        }else{
            this.setState({
                opacity: 1
            })
        }
    }
    render() {
        const { navigation } = this.props;
        return (
                <View style={styles.container}>
                <View style={{width:width,height:69,alignItems:'center',flexDirection:'row',position:'absolute',top:0,backgroundColor:'rgba(122,233,111,' + this.state.opacity + ')'}}>
     61                     <Text style={{width:60,color:'red'}} onPress={()=>this.props.navigation.goBack(null)}>返回</Text>
                </View>
                <FlatList
                    data={CITY_NAMES}
                    renderItem={(data) => this._renderItem(data)}
                    onScroll = {(e)=>{this.onScroll(e)}}    //发现FlatList的文档中没有onScroll事件监听，有点小懵逼。但是ScrollView与FlatList是父子关系，然后看ScrollView的API说明，果然在ScrollView中发现了onScroll的事件监听。
                    refreshing = { this.state.refreshing }
                    onRefresh = {()=>{
                        this.loadData()
                    }}
                    ListFooterComponent={()=>{
                        this.genIndicator()
                    }}
                    onEndReached={()=>{
                        this._onEndReached()
                    })
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    item: {
        backgroundColor: '#169',
        height: 200,
        marginRight: 15,
        marginLeft: 15,
        marginBottom: 15,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'white',
        fontSize: 20,
    }
});