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 <Text style={[{flex:1,height:ITEM_HEIGHT,backgroundColor:bgColor},styles.txt]}>{txt}</Text>
    }

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

FlatList和SectionList

推荐阅读更多精彩内容