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