ReactNative-SectionList基本使用
2011 年 12 月 12 日
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 {item.title} 电话:{item.telPhone} 地址:{item.address} {this.callPhoneClick(item.telPhone)}}>拨打电话 } renderSectionHeader={({section}) => {section.title}} keyExtractor={(item, index) => index} /> } } 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运行效果: