FlatView
ItemSeparatorComponent：分割線組件，
ListFooterComponent：結(jié)尾組件
ListHeaderComponent：頭組件
data：列表數(shù)據(jù) （必須有）
horizontal：設(shè)置為true則變?yōu)樗搅斜怼?br> numColumns：列數(shù) 組件內(nèi)元素必須是等高的,無(wú)法支持瀑布流布局
columnWrapperStyle：numColumns大于1時(shí)，設(shè)置每行的樣式
getItemLayout：如果我們知道行高可以用此方法節(jié)省動(dòng)態(tài)計(jì)算行高的開(kāi)銷(xiāo)。
refreshing：是否正在加載數(shù)據(jù)
onRefresh：設(shè)置此屬性需要一個(gè)標(biāo)準(zhǔn)的 RefreshControl 控件，刷新數(shù)據(jù)
renderItem：渲染每個(gè)組件 （必須有）
onViewableItemsChanged：當(dāng)一個(gè)新的Item渲染或者隱藏 的時(shí)候調(diào)用此方法。參數(shù)：info: {viewableItems: Array, changed: Array} viewableItems：當(dāng)前可見(jiàn)的Item，changed：渲染或者隱藏的Item。
scrollToEnd({params?: ?{animated?: ?boolean}})：滾動(dòng)到末尾，如果不設(shè)置getItemLayout屬性的話，可能會(huì)比較卡。
scrollToIndexparams: {animated?: ?boolean, index: number, viewPosition?: number}：滾動(dòng)到制定的位置
scrollToOffset(params: {animated?: ?boolean, offset: number})：滾動(dòng)到指定的偏移的位置。

Demo.png

渲染函數(shù)

_renderItem = (item) => {
        var txt = '第' + item.index + '個(gè)' + ' title=' + item.item.title;
        var bgColor = item.index % 2 == 0 ? 'red' : 'blue';
        return <Text style={[{flex:1,height:ITEM_HEIGHT,backgroundColor:bgColor},styles.txt]}>{txt}</Text>
    }

item.index:該數(shù)據(jù)對(duì)應(yīng)的位置，
item.item.title:數(shù)組中的內(nèi)容
SectionList:

import React, { Component } from 'react';
import {StyleSheet, Text, View, Image, TouchableOpacity,SectionList, FlatList, Alert} from 'react-native';
import Data from './Data3';
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
export default class Small extends Component {

    render() {
        return(
           <SectionList
               sections={Data}
               renderSectionHeader={this.RenderSectionHeader}
               renderItem={this.RenderItem}
               style={styles.ceilViewStyle}

           />
        );
    }
    RenderItem=(info)=>{
        return(
            <View style>
                <Image source={{uri:info.item.icon}}
                       style={styles.leftImageStyle}
                />
                <Text>{info.item.name}</Text>
            </View>
        );
    }
    RenderSectionHeader=(info)=>{
        return(
            <Text>{info.section.title}</Text>
        );
    }

}
const styles = StyleSheet.create({
    ceilViewStyle:{
        padding:10,
        borderBottomWidth:0.5,
        borderBottomColor:'yellow',
        flexDirection:'row',

    },
    leftImageStyle:{
        width:80,
        height:60,
        marginRight:15,
    },
    rightViewStyle:{

    },
    topTitle:{
        fontSize:20,
    },

    bottomTitleStyle:{
        width:width*0.7,
        marginTop:5
    }
})

sectionList比FlatList多一個(gè)，key屬性，（info.item.屬性名），（info.section.key）,用于實(shí)現(xiàn)手機(jī)通信錄。