React Native提供了幾個(gè)適用于展示長(zhǎng)列表數(shù)據(jù)的組件，一般而言我們會(huì)選用FlatList或是SectionList。
FlatList組件用于顯示一個(gè)垂直的滾動(dòng)列表，其中的元素之間結(jié)構(gòu)近似而僅數(shù)據(jù)不同。
FlatList更適于長(zhǎng)列表數(shù)據(jù)，且元素個(gè)數(shù)可以增刪。和不同的是，FlatList并不立即渲染所有元素，而是優(yōu)先渲染屏幕上可見(jiàn)的元素。
FlatList組件必須的兩個(gè)屬性是data和renderItem。data是列表的數(shù)據(jù)源，而renderItem則從數(shù)據(jù)源中逐個(gè)解析數(shù)據(jù)，然后返回一個(gè)設(shè)定好格式的組件來(lái)渲染。

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

如果要渲染的是一組需要分組的數(shù)據(jù)，也許還帶有分組標(biāo)簽的，那么SectionList將是個(gè)不錯(cuò)的選擇.

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