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  {
    constructor(props) {
        super(props)
        this.state = {
            data: ['叮当机器猫', '樱桃小丸子', '皮卡丘', '叮当机器猫', '樱桃小丸子', '皮卡丘', '叮当机器猫', '樱桃小丸子', '皮卡丘'],
            isRefreshing: false,//下拉控制
            state: 1,
        }
    }

    render() {
        return (

            
                
                //一个输入框
                    
                
                {this.state.data.length > 0 ?
                     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}
                    />
                    : 
                        
                    
                }
            

        );
    }

    _renderItem({item}) {
        return 
            
            {item}
        
    }

    _separator = () => {
        return ;
    }

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

    }

    _renderFooter(x) {
        let i = x === 1 ? '我是头部' : '我是尾部------';
        return (
            this.state.data.length !== 0 ?
                
                    {i}
                 : null
        )
    }

    _empty() {
        return (
            
                list为空
            
        )
    }

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

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

简单粗暴