e3f96acf26
Summary: The example uses StyleSheet.create and also arrays-of-styles. I think this covers everything the old one did, but in simple-enough-for-the-basics form, so I removed the old one. I also reordered so that "Style -> Dimensions -> Layout" is the flow for learning "Styley" things. Closes https://github.com/facebook/react-native/pull/8379 Differential Revision: D3478384 Pulled By: caabernathy fbshipit-source-id: 158f0f0367c8eb8b2b24feda0d8d7a533fd7af4d
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, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class ListViewBasics extends Component {
// Initialize the hardcoded data
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
<View style={{paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => ListViewBasics);