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