reactNative—FlatList

大家好，我是贰妹子，希望我的博客对你有帮助（一定要勤加动手啊）

在React Native里有很多种方法来创建可滚动的list。比如，ScrollView和ListView。他们都各有优缺点。但是在React Native 0.43里增加了两种行的list view。一个是FlatList, 一个是SectionList。今天我们就来详细了解一下FlatList。
如果你熟悉RN之前的ListView的话你会发现FlatList的API更加的简单，只需要给它一列数据，然后根据每一项数据绘制行就可以。

list View已过时，现在用的FlatList

常用功能

• 上拉刷新
• 下拉加载

基本使用方法

基本上你只要给FlatList的两个props指定值就可以了，一个是data，一个是renderItem。数据源一般就是一个数组，而renderItem就是每一行的绘制方法。绘制行的时候只需要获取当前的数据项就可以。

用FlatList组件写的例子，一起来试试吧

首先import必要的组件：import { FlatList } from ‘react-native’;。当然还有其他的一些组件。render方法里就可以写绘制的代码了:

分割线 - seperator

我们的APP本身在显示message的时候没有明显的分割线，而是用一块一块的方式显示的。如果只是简单的一条线分割两行，那么只需要设置行组件的boderBottom相关的属性就可以了。

如果你一定要一个分割线的话可以使用FlatList的ItemSeperatorComponent prop

下拉刷新和上拉加载更多

自从这两个交互的方式自从发明出来之后就基本上是每一个应用里list的标配了。我们来看看FlatList如何添加这两个功能的。

FlatList的几个props：

refreshing：表明list是否在refresh的状态。
onRefresh：开始refresh的事件。在这个方法里开始设置refresh的时候组件的state，并在setState方法的回调里开始请求后端的数据。
onEndReached: 上拉加载跟个多的事件。在这里设置加载更多对应的组件状态，并在setState方法的回调里请求后端数据。
onEndReachedThreshold：这个值是触发onEndReached方法的阈值。值是RN的逻辑像素。

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    Image,
    FlatList,
    TextInput,
    Button,
    TouchableOpacity
} from 'react-native';

export default class PiKaQiu extends Component <Props> {
    constructor(props) {
        super(props)
        this.state = {
            data: ['叮当机器猫', '樱桃小丸子', '皮卡丘', '叮当机器猫', '樱桃小丸子', '皮卡丘', '叮当机器猫', '樱桃小丸子', '皮卡丘'],
            isRefreshing: false,//下拉控制
            state: 1,
        }
    }

    render() {
        return (

            <View style={{flex: 1}}>
                <View style={{flexDirection: 'row'}}>
                //一个输入框
                    <TextInput
                        style={styles.textInputStyle}
                        placeholder='提示语'
                    />
                </View>
                {this.state.data.length > 0 ?
                    <FlatList
                    //拿取数据，data里放的是数组类型的
                        data={this.state.data}
                        renderItem={(data) => this._renderItem(data)}
                        //分割线
                        ItemSeparatorComponent={this._separator}
                        horizontal={false}
                        //刷新相关
                        onRefresh={this._onRefresh.bind(this)}
                        refreshing={this.state.isRefreshing}
                        ListFooterComponent={this._renderFooter.bind(this)}
                        ListEmptyComponent={this._empty}
                    />
                    : <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                        <Image
                            style={{width: 60, height: 60}}
                            source={require('../../res/images/ss.jpg')}
                        />
                    </View>
                }
            </View>

        );
    }

    _renderItem({item}) {
        return <View style={styles.viewStyle}>
            <Image
                style={{width: 100, height: 100}}
                source={require('../../res/images/ee.jpg')}
            />
            <Text>{item}</Text>
        </View>
    }

    _separator = () => {
        return <View style={{height: 3, backgroundColor: "#f89843"}}/>;
    }

    _onRefresh() {
        this.setState({
            data:[]
        })

    }

    _renderFooter(x) {
        let i = x === 1 ? '我是头部' : '我是尾部------';
        return (
            this.state.data.length !== 0 ?
                <View style={{alignItems: 'center', backgroundColor: 'green'}}>
                    <Text>{i}</Text>
                </View> : null
        )
    }

    _empty() {
        return (
            <View style={{
                backgroundColor: '#898', flex: 1, height: 500, alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Text>list为空</Text>
            </View>
        )
    }

}
const styles = StyleSheet.create({
    inputView: {
        flexDirection: 'row',
    },
    textInputStyle: {

        flex: 1,
        height:70
    },
    viewStyle: {
        flex: 1,
        flexDirection: 'row',
    },
});

简单粗暴