3.6 KiB
id | title | layout | category | permalink | next | previous |
---|---|---|---|---|---|---|
using-a-listview | Using List Views | docs | The Basics | docs/using-a-listview.html | network | using-a-scrollview |
React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either FlatList or SectionList.
The FlatList
component displays a scrolling list of changing, but similarly structured, data. FlatList
works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView
, the FlatList
only renders elements that are currently showing on the screen, not all the elements at once.
The FlatList
component requires two props: data
and renderItem
. data
is the source of information for the list. renderItem
takes one item from the source and returns a formatted component to render.
This example creates a simple FlatList
of hardcoded data. Each item in the data
props is rendered as a Text
component. The FlatListBasics
component then renders the FlatList
and all Text
components.
import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';
export default class FlatListBasics extends Component {
render() {
return (
<View style={styles.container}>
<FlatList
data={[
{key: 'Devin'},
{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,
},
})
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);
If you want to render a set of data broken into logical sections, maybe with section headers, similar to UITableView
s on iOS, then a SectionList is the way to go.
import React, { Component } from 'react';
import { AppRegistry, 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']},
{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>}
/>
</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,
},
})
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => SectionListBasics);
One of the most common uses for a list view is displaying data that you fetch from a server. To do that, you will need to learn about networking in React Native.