《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>
    );
  }
  
}