React Native List Views

O React Native fornece um conjunto de componentes para a apresentação de listas de dados. Geralmente, você desejará usar o FlatList ou o SectionList .

O FlatListcomponente exibe uma lista de rolagem de dados alterados, mas estruturados de maneira semelhante. FlatList funciona bem para longas listas de dados, onde o número de itens pode mudar com o tempo. Diferentemente dos mais genéricos ScrollView, os FlatList únicos processam os elementos que estão sendo exibidos na tela, nem todos os elementos de uma só vez.

O FlatList componente requer dois adereços: data e renderItem. data é a fonte de informações para a lista. renderItem pega um item da fonte e retorna um componente formatado para renderizar.

Este exemplo cria um simples FlatList dado codificado. Cada item nos data acessórios é renderizado como um Text componente. O FlatListBasics componente processa o FlatList e todos os Text componentes.

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,
  },
})
```


Se você deseja renderizar um conjunto de dados dividido em seções lógicas, talvez com cabeçalhos de seção, semelhantes aos UITableViews no iOS, um SectionList é o caminho a seguir.



```react
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,
  },
})
```


Um dos usos mais comuns de uma exibição de lista é exibir dados que você busca de um servidor. 
(Texto traduzido da documentação original)