《ReactNative》之SectionList的简单使用

1.效果截图

2.完整代码

import React,{Component} from 'react';import{StyleSheet,  View,  Text,  SectionList,} from 'react-native';export default class Contact extends Component{constructor(props){    super(props);  }  componentWillMount(){  }  _renderItemComponent = ({item}) => {    console.log(item);    return(      <View style={{flexDirection:'row'}}>        <Text style={{marginRight:20}}>{item.name}</Text>        <Text>{item.phone}</Text>      </View>    );  }  _sectionHeader = ({section})=>{    return(      <View>        <Text style={{backgroundColor:'#f0f0f0',color:'#00bfff'}}>{section.key}</Text>      </View>    );  }    render(){    var sections = [];    var dataA = [];        dataA.push({name:'安建文',phone:'18992131120',key:'1'});    dataA.push({name:'安周平',phone:'13212345678',key:'2'});    sections.push({key:'A',data:dataA});    var dataB = [];    dataB.push({name:'白万剑',phone:'18992131121',key:'3'});    dataB.push({name:'白浩江',phone:'13212345678',key:'4'});    sections.push({key:'B',data:dataB});    var dataC = [];    dataC.push({name:'蔡文姬',phone:'18192131123',key:'5'});    dataC.push({name:'曹操',phone:'13212345679',key:'6'});    sections.push({key:'C',data:dataC});  return (      <View style={{marginLeft:5,marginRight:5,}}>        <SectionList          renderItem={this._renderItemComponent}          renderSectionHeader={this._sectionHeader}          sections={sections}        />      </View>    );  }  }