列表 FlatList & SectionList &

1 FlatList (无分组 高性能的简单列表组件)
属性rn官网：http://reactnative.cn/docs/0.47/flatlist.html

附效果图：

Simulator Screen Shot 2017年8月21日 下午1.59.44.png

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

const { height, width } = Dimensions.get('window');
let ITEM_HEIGHT = 100;
export default class FlatListExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            refreshing: false
        };
    }
    _renderItem = (item) => {
        var txt = '第' + item.index + '个' + ' title=' + item.item.title;
        var bgColor = item.index % 2 == 0 ? 'red' : 'blue';
        return (
            <TouchableOpacity  onPress={() => {alert(txt);} }>
                  <Text style={[{ height: ITEM_HEIGHT, backgroundColor: bgColor, width: width / 2 },styles.txt]}>{txt}</Text>
            </TouchableOpacity>
        )
    }

    _header = () => {
        return <Text style={[styles.txt, { backgroundColor: 'white' }]}>这是头部</Text>;
    }

    _footer = () => {
        return <Text style={[styles.txt, { backgroundColor: 'white' }]}>这是尾部</Text>;
    }
    _separator = () => {
        return <View style={{ height: 1, backgroundColor: 'yellow' }}/>;
    }
    _onRefresh() {
        alert('正在刷新中.... ');
    }
    render() {
        var data = [];
        for (var i = 0; i < 31; i++) {
            data.push({ key: i, title: i + '' });
        }
        return (
            <View style={{ flex: 1 }}>
                <Button title='滚动到指定位置' onPress={() => {
                    //this._flatList.scrollToEnd();
                    //this._flatList.scrollToIndex({viewPosition:0,index:8});
                    this._flatList.scrollToOffset({ animated: true, offset: 2000 });
                } }/>
                <View style={{ flex:1}}>
                    <FlatList
                        ref={(flatList) => this._flatList = flatList}   //取得组件本身
                        ListHeaderComponent={this._header}  //头部
                        ListFooterComponent={this._footer}  //尾部
                        ItemSeparatorComponent={this._separator} //分割线
                        renderItem={this._renderItem}
                        numColumns ={2}
                        columnWrapperStyle={{ borderWidth: 2, borderColor: 'black' }}
                        refreshing={this.state.refreshing}
                        getItemLayout={(data, index) => ({length:ITEM_HEIGHT,offset:(ITEM_HEIGHT+1)*index,index})}
                        onRefresh={this._onRefresh}
                        onEndReachedThreshold={0.1}
                        onEndReached={(info) => {
                            alert("滑动到底部了");
                        } }
                        onViewableItemsChanged={(info) => {
                            //    alert("可见不可见触发");
                        } }
                        data={data}>
                    </FlatList>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    txt: {
        textAlign: 'center',
        textAlignVertical: 'center',
        color: 'black',
        fontSize: 18,
    }
});
module.exports = FlatListExample;

2 SectionList(高性能的分组列表组件)
在0.43版本中，如果希望section的头部能够吸顶悬浮，请暂时先使用老版的 ListView。下一个版本开始可以支持悬浮的section头部。
属性：
SectionSeparatorComponent：组之间的分割控件
renderSectionHeader：组的头部
sections：列表的数据
详细:http://reactnative.cn/docs/0.43/sectionlist.html#content
效果图

Simulator Screen Shot 2017年8月21日 下午4.45.16.png

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    SectionList,
} from 'react-native';
export default class SectionListDemo extends Component {
    _renderItem = (info) => {
        let text = 'index' + info.index + '  '+ info.item.title;
        return <View style={{flex:1}}>
            <Text style={{height:30,fontSize:15}}>{text}</Text>
            </View>
    }
    _renderSectionHeader = (info) =>{
        var txt = 'key:' + info.section.key;
        return <Text
            style={{height:50,textAlign:'center',textAlignVertical:'center',backgroundColor:'#e4e6ed',color:'black',
            fontSize:20}}>{txt}</Text>
    }
    _keyExtractor = (item,index) => {
        return ''+index;
    }
    _itemSeparatorComponent = () =>{
        return <View style = {{height:1,backgroundColor:'#e4e6ed'}}></View>
    }
        render(){
            var sections = [];
            for(var  i = 0; i< 3;i++){
                var datas = [];
                for(var j = 0; j<10;j++){
                    datas.push({title:j});
                }
                sections.push({key:i,data:datas});
            }
            return(
                <View style = {{flex:1}}>
                <SectionList sections = {sections}
                renderItem = {this._renderItem}
                renderSectionHeader={this._renderSectionHeader}
                keyExtractor = {this._keyExtractor}
                ItemSeparatorComponent={this._itemSeparatorComponent}>
                </SectionList>
                </View>
            )
        }
}
module.exports = SectionListDemo;