4243d682a0
Summary: This is an improvement to basic components docs. * I updated the basic components example code to better render components on iOS (added paddingTop). * I also modified the code to allow reader to easily copy, paste, and then run the code in their project if they followed the 'Getting Started' quick start guide. * I also added additional copy to clarify suggested usage/guidelines. Closes https://github.com/facebook/react-native/pull/8292 Differential Revision: D3469943 Pulled By: JoelMarcey fbshipit-source-id: 21ff6ee13b59741c43d80aab68a38aace0fbfca6
2.2 KiB
| id | title | layout | category | permalink | next |
|---|---|---|---|---|---|
| basics-component-listview | ListView | docs | 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);