FlatList和SectionList

FlatView
ItemSeparatorComponent：分割线组件，
ListFooterComponent：结尾组件
ListHeaderComponent：头组件
data：列表数据 （必须有）
horizontal：设置为true则变为水平列表。
numColumns：列数 组件内元素必须是等高的,无法支持瀑布流布局
columnWrapperStyle：numColumns大于1时，设置每行的样式
getItemLayout：如果我们知道行高可以用此方法节省动态计算行高的开销。
refreshing：是否正在加载数据
onRefresh：设置此属性需要一个标准的 RefreshControl 控件，刷新数据
renderItem：渲染每个组件 （必须有）
onViewableItemsChanged：当一个新的Item渲染或者隐藏 的时候调用此方法。参数：info: {viewableItems: Array, changed: Array} viewableItems：当前可见的Item，changed：渲染或者隐藏的Item。
scrollToEnd({params?: ?{animated?: ?boolean}})：滚动到末尾，如果不设置getItemLayout属性的话，可能会比较卡。
scrollToIndexparams: {animated?: ?boolean, index: number, viewPosition?: number}：滚动到制定的位置
scrollToOffset(params: {animated?: ?boolean, offset: number})：滚动到指定的偏移的位置。

Demo.png

渲染函数

_renderItem = (item) => {
        var txt = '第' + item.index + '个' + ' title=' + item.item.title;
        var bgColor = item.index % 2 == 0 ? 'red' : 'blue';
        return {txt}
    }

item.index:该数据对应的位置，
item.item.title:数组中的内容
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(
           
        );
    }
    RenderItem=(info)=>{
        return(
            
                
                {info.item.name}
            
        );
    }
    RenderSectionHeader=(info)=>{
        return(
            {info.section.title}
        );
    }

}
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多一个，key属性，（info.item.属性名），（info.section.key）,用于实现手机通信录。