引用官网:如果你的列表不需要分组(section),那么可以使用结构更简单的<FlatList>
import React, {Component} from 'react';
import {
Text,
View,
SectionList,
StyleSheet,
} from 'react-native'
import Dimensions from 'Dimensions'
const { width,height } = Dimensions.get('window')
let data = [
{
"key": "A",
"data": [
{
"title": "正许六",
"name": "阿多标"
},
{
"title": "于南装",
"name": "阿人院"
},
{
"title": "准象白",
"name": "阿照速"
}
],
},
{
"key": "B",
"data": [
{
"title": "切规指",
"name": "白低族"
},
{
"title": "海对导",
"name": "白义局"
},
{
"title": "切历联",
"name": "白北选"
}
],
},
{
"key": "C",
"data": [
{
"title": "三放类",
"name": "陈分革"
},
{
"title": "关党部",
"name": "陈然传"
},
{
"title": "京需运",
"name": "陈土务"
}
],
}
]
export default class List extends Component {
constructor(props){
super(props);
this.state = {
data: data
}
}
render() {
return (
<View style={styles.container}>
<SectionList
sections={this.state.data} //数据源,类似于<FlatList>中的data属性
renderSectionHeader={this._sectionComp} //每个section的头部渲染
renderItem={this._renderItem} //渲染每一个section中的每一个列表项
keyExtractor={(item,index) => index.toString()} //为给定的item生成一个不重复的key
ItemSeparatorComponent={this._itemSeparator} //行与行之间的分隔线
SectionSeparatorComponent={this._sectionSeparator} //在每个`section`的顶部和底部渲染
stickySectionHeadersEnabled={false} //是否吸顶,ios默认为true;Android默认为false
/>
</View>
);
}
_sectionComp = (item) => {
return(
<Text style={styles.key}>{item.section.key}</Text>
)
}
_renderItem = (item) => {
return(
<Text style={styles.name}>{item.item.name}</Text>
)
}
_itemSeparator = () => {
return(
<Text style={styles.separator}></Text>
)
}
_sectionSeparator = () => {
return(
<Text style={[styles.separator,{backgroundColor:'#f00'}]}></Text>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
key: {
width: width,
height: 50,
backgroundColor: 'cyan',
lineHeight: 50,
textAlign: 'center',
},
name: {
width: width,
height: 35,
backgroundColor: '#fff',
lineHeight: 35,
paddingLeft: 20,
},
separator: {
height: 2,
}
})
效果:stickySectionHeadersEnabled为false: