DEV Community

Alexandre Freire
Alexandre Freire

Posted on

React Native List Views – Introdução e Exemplo

React Native List Views: A princípio 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.
Alt Text

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

A princípio este exemplo cria um simples FlatListdado 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,
  },
})
Enter fullscreen mode Exit fullscreen mode

Entretanto 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.

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,
  },
})
Enter fullscreen mode Exit fullscreen mode

Enfim um dos usos mais comuns de uma exibição de lista é exibir dados que você busca de um servidor. Para fazer isso, você precisará aprender sobre redes no React Native.

Fonte: https://facebook.github.io/react-native/docs/using-a-listview

Top comments (0)