072ef0a0d4
Summary: TLDR even more docs changes So I created a More Resources doc that aggregates the high-quality-but-off-site stuff. Let's try to put more outlinks there. Also I removed the stuff on Support that was not support, and some misc changes to clean stuff up. Closes https://github.com/facebook/react-native/pull/8329 Differential Revision: D3471669 Pulled By: JoelMarcey fbshipit-source-id: 54edd543ced1b3a8f3d0baca5475ac96bae6e487
2.2 KiB
| id | title | layout | category | permalink | next |
|---|---|---|---|---|---|
| basics-component-listview | ListView | docs | The Basics | docs/basics-component-listview.html | basics-network |
On mobile devices, lists are a core element in many applications. The ListView component is a special type of View that displays a vertically scrolling list of changing, but similarly structured, data.
ListView works best for possibly lengthy datasources (e.g., from an endpoint or database), where the number of items may not be known a priori.
Unlike the more generic
ScrollView, theListViewonly renders elements that are currently showing on the screen, not all the elements at once.
The ListView component requires two properties, dataSource and renderRow. dataSource is the source of information for the list. renderRow takes one item from the source and returns a formatted component to render.
This example creates a simple ListView of hardcoded data. It first initializes the dataSource that will be used to populate the ListView. Each item in the dataSource is then rendered as a Text component. Finally it renders the ListView and all Text components.
A
rowHasChangedfunction is required to useListView. Here we just say a row has changed if the row we are on is not the same as the previous row.
import React from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
var AwesomeList = React.createClass({
// Initialize the hardcoded data
getInitialState: function() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie'
])
};
},
render: function() {
return (
<View style={{paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
});
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => AwesomeList);