ListView

带有section的List

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView
} from 'react-native';

export default class ListViewTest extends Component {
  constructor(props){
      super(props)
      var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2,
      sectionHeaderHasChanged:(s1,s2) => s1 !== s2})
      this.state = {
        dataSource:ds,
        data:{a:['h','m'],b:['e','j'],c:["l","f"],d:["l","i"],e:["o",'h']},
      }
  }
  _renderRow(rowData,rowId,sectionId){
    return(
      <Text>{rowData + '   ' + rowId + '   '+sectionId}</Text>
    )
  }
  render() {
    return (
      <View style={styles.container}>
        <ListView style={{marginTop:20}}
                  dataSource={this.state.dataSource.cloneWithRowsAndSections(this.state.data)}
                  renderRow={(rowData,sectionId,rowId) => this._renderRow(rowData,rowId,sectionId)}
                  showVerticalScrollIndicator={false}/>
                  
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('ListViewTest', () => ListViewTest);