React Native如何创建长列表

React Native提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList。
FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。
FlatList更适于长列表数据，且元素个数可以增删。和不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

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

export default class PizzaTranslator extends Component {
  render(){
    return(
        <View style={styles.container}>
          <FlatList
          data = {[
            {key:'Devin'},
            {key:'Jacson'},
            {key:'james'},
            {key:'Joel'},
            {key:'John'},
            {key:'Jimmy'}
          ]}
          renderItem = {({item}) => <Text style={styles.item}>{item.key}</Text>}
          />
        </View>
      );
  }
}
const styles = StyleSheet.create({
  container:{
    flex:1,
    paddingTop:20
  },
  item:{
    padding:10,
    fontSize:18,
    height:44
  }
});

result

FlatList

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

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

export default class PizzaTranslator extends Component {
  render(){
    return(
        <View style={styles.container}>
          <SectionList
              sections={[
                {title:'D',data:['Devin']},
                {title:'J',data:['Jackson','james','Jillian','joel','Julie']}
              ]}
              renderItem={({item})=><Text style={styles.item}>{item}</Text>}
              renderSectionHeader = {({section})=><Text style={styles.header}>{section.title}</Text>}
          />
        </View>
      );
  }
}

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

result

SectionList