RN之使用长列表

React Native提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList。
FlatList更适用于长列表数据，且元素个数可以增删。和ScrolView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性时data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
下面的例子创建了一个简单的FlatList，并预设了一些模拟数据。首先是初始化FlatList所需的data，其中的每一项（行）数据之后都在renderItem中被渲染成了Text组件，最后构成整个FlatList。

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

export default class FlatListBasics extends Component{
    render(){
        return(
        <View style={styles.container}>
        <FlatList
        data={[
            {
                key:'devin',
                key:'dan',
                key:'dominic',
                key:'jackson',
                key:'james'
                key:'joel',
                key:'john',
                key:'jillian',
                key:'jimmy',
                key:'julie'
            }]
            renderItem={({item})=> <Text style={styles.item}>item.key}</Text>}
            />
            </View>
        );
    }
}

const styles=StyleSheet.create({
    container:{
        flex:1,
        paddingTop:22
    },
    item:{
        padding:10,
        fontSize:18,
        height:44,
    },
})

如果要渲染的是一组需要分组的数据，也许还带有分组标签的，那么SectionList将是个不错的选择。

import React, { Component } from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

列表的一个常用场景就是从服务器端取回列表数据然后显示，要实现这一过程，还需要学习RN的网络相关用法。