帶有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);
