ReactNative-SectionList基本使用

ReactNative中是这样介绍SectionList的：

高性能的分组(section)列表组件，支持下面这些常用的功能：

• 完全跨平台。
• 行组件显示或隐藏时可配置回调事件。
• 支持单独的头部组件。
• 支持单独的尾部组件。
• 支持自定义行间分隔线。
• 支持分组的头部组件。
• 支持分组的分隔线。
• 支持多种数据源结构
• 支持下拉刷新。
• 支持上拉加载。

import React, { Component } from 'react';
import{
    View,
    Text,
    Image,
    SectionList,
    Linking,
    StyleSheet,
}from 'react-native';

export default class RepairShops extends Component{ 
    constructor(props){
        super(props);
        this.state={
            dataList:[
            {title: ' ', data: [{title:'北京市朝阳区维修中心',telPhone:'010-82656682',address:'北京市朝阳区建国路88号大望路SOHO现代城C座7层709室'}]},
            {title: ' ', data: [{title:'北京市海淀区维修中心',telPhone:'010-82657928',address:'北京市海淀区中关村南大街天作国际B座1903室'}]},
          ]
        }
    }
    callPhoneClick(phoneNum){
        let telPhone = 'tel:'+phoneNum;// 目标电话
        Linking.canOpenURL(telPhone).then((supported) => {
            if (!supported) {
              console.log('Can not handle telPhone:' + telPhone)
            } else {
              return Linking.openURL(telPhone)
            }
          }).catch(error => console.log('telPhone error', error))
    }
    render(){
        return <View style = {styles.container}>
            <SectionList
          style={{backgroundColor:'#f5f5f5'}} 
          sections={this.state.dataList}
          renderItem={({item,index}) => <View style={styles.shopBox}>
                <Text style={styles.shopTitle}>{item.title}</Text>
                <Text style={styles.telPhone}>电话:{item.telPhone}</Text>
                <Text style={styles.address}>地址：{item.address}</Text>
                <View style={styles.phoneInfo}>
                    <Image style={styles.callPhoneImage} source={require("../../res/images/call_phone.png")}></Image>
                    <Text style={{marginLeft:3,color:"#4A4A4A",fontSize:15}} onPress={()=>{this.callPhoneClick(item.telPhone)}}>拨打电话</Text>
                </View>
            </View>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
        </View>
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#f5f5f5'
    },
    shopBox:{
        backgroundColor:'white',
        justifyContent:'center'
    },
    shopTitle:{
        marginTop:10,
        marginLeft:15,
        fontSize:16,
        fontWeight:'bold',
        color:'#4a4a4a'
    },
    telPhone:{
        marginTop:5,
        marginLeft:15,
        fontSize:14,
        color:'#a4a4a4'
    },
    address:{
        marginTop:5,
        marginLeft:15,
        fontSize:14,
        color:'#a4a4a4'
    },
    sectionHeader:{
        height:10,
        backgroundColor: '#f5f5f5',
    },
    phoneInfo:{
        marginTop:10,
        height:30,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    callPhoneImage:{
        width:20,
        height:20,
    }
});

sections

用来渲染的数据

keyExtractor

此函数用于为给定的 item 生成一个不重复的 key。Key 的作用是使 React 能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取 item.key 作为 key 值。若 item.key 也不存在，则使用数组下标。注意这只设置了每行（item）的 key，对于每个组（section）仍然需要另外设置 key。

renderItem

用来渲染每一个 section 中的每一个列表项的默认渲染器。可以在 section 级别上进行覆盖重写。必须返回一个 react 组件。

https://reactnative.cn/docs/sectionlist

demo运行效果：