這個(gè)是效果：

第一步：準(zhǔn)備數(shù)據(jù)源：Car.json

{"data": [{"cars": [{"icon": "m_180_100.png","name": "AC Schnitzer"},{"icon": "m_92_100.png","name": "阿爾法·羅密歐"},{"icon": "m_9_100.png","name": "奧迪"},{"icon": "m_97_100.png","name": "阿斯頓·馬丁"}],"title": "A"}........ }

?第二步：

import React, {Component} from 'react'; import {AppRegistry,StyleSheet,Text,View,SectionList,Dimensions,Image } from 'react-native';const dimension = Dimensions.get('window') var Car = require('./Car.json');var itemWidth = 100; var cols = 3; var cMargin = (dimension.width - (itemWidth * cols)) / 4.0; var rMargin = 12;export default class SectionListView1 extends Component {componentDidMount() {}_renderSectionHeader(info) {return (<View><Text key={info.section.key} style={styles.sectionStyle}>{info.section.title}</Text></View>)}_renderItem(info) {return (<View style={styles.cellStyle}><Image source={{uri: info.item.icon}} style={styles.imageStyle}/><Text>{info.item.name}</Text></View>)}_separatorCom() {return (<View style={{height: 4, width: 500, backgroundColor: 'orange'}}></View>)}render() {var dataSource = [];for (var i = 0; i < Car.data.length; i++) {let datas = [];for (var j = 0; j < Car.data[i].cars.length; j++) {datas.push(Car.data[i].cars[j]);}dataSource.push({key: i, data: datas, title: Car.data[i].title});}return (<View style={styles.container}><SectionListrenderSectionHeader={this._renderSectionHeader}renderItem={this._renderItem}sections={dataSource}// refreshing={false}// onRefresh={()=>{alert("刷新")}}// ItemSeparatorComponent={this._separatorCom}// SectionSeparatorComponent={() => <View style={{height: 20, backgroundColor: 'blue'}}></View>}keyExtractor={(item, index) => ("index" + index + item)}// onEndReached={(info)=>{alert("到達(dá)底部")}}// onEndReachedThreshold={0}// stickySectionHeadersEnabled={true}ListHeaderComponent={() => <Viewstyle={{backgroundColor: 'yellow', alignItems: 'center',justifyContent: 'center',width:dimension.width,height:50}}><Text>這個(gè)是我的表頭</Text></View>}ListFooterComponent={() => <Viewstyle={{backgroundColor: 'red', alignItems: 'center',width:dimension.width}}><Text>這個(gè)是我的表尾</Text></View>}contentContainerStyle={styles.sectionListStyle}//設(shè)置cell的樣式pageSize={4}/></View>);} }const styles = StyleSheet.create({sectionListStyle: {flexDirection: 'row',flexWrap: 'wrap',alignItems: 'flex-start',backgroundColor: '#dd6ddd',},sectionStyle: {width: dimension.width,padding: 12,backgroundColor: '#21c6cd',color: '#fff'},cellStyle: {alignItems: 'center',borderRadius: 5,borderWidth: 1,borderColor: '#ff496b',marginLeft: cMargin,marginTop:rMargin,marginBottom:rMargin,padding: 6,width:itemWidth},imageStyle: {width: 70,height: 70}}) ;module.exports = SectionListView1;

?如果大家把上面描述的的SectionList的下面兩句代碼刪除，則會(huì)出現(xiàn)單行情況，如果有興趣，自行調(diào)試

contentContainerStyle={styles.sectionListStyle}//設(shè)置cell的樣式pageSize={4}

?

?

?

?

renderItem：定義每個(gè)元素組件的渲染方式，默認(rèn)傳入?yún)?shù)rowData，要訪問(wèn)其中的"title"可以通過(guò)rowData.item.title訪問(wèn)到。
ItemSeparatorComponent：定義每個(gè)元素之間分割組件

ListHeaderComponent：定義頭部組件
ListFooterComponent：定義底部組件

ListEmptyComponent：data為空時(shí)顯示的組件

columnWrapperStyle：定義每個(gè)組件欄的包裹樣式，不支持單行組件
numColumns：number，定義每行顯示的元素個(gè)數(shù)
refreshControl：定義頭部刷新組件，例如：
????????? refreshControl={ //下拉刷新組件
<RefreshControl
refreshing={this.state.refreshing} //通過(guò)bool值refreshing控制是否刷新
onRefresh={this._onRefresh.bind(this)} //刷新時(shí)需要執(zhí)行的函數(shù)
/>
}
onEndReached：在列表滾動(dòng)到底部一定距離時(shí)調(diào)用這個(gè)函數(shù)，一般在此定義滾動(dòng)到底部時(shí)加載新的數(shù)據(jù)。
onEndReachedThreshold：決定當(dāng)距離內(nèi)容最底部還有多遠(yuǎn)時(shí)觸發(fā)onEndReached回調(diào)。注意此參數(shù)是一個(gè)比值而非像素單位。比如，0.5表示距離內(nèi)容最底部的距離為當(dāng)前列表可見(jiàn)長(zhǎng)度的一半時(shí)觸發(fā)。

?

轉(zhuǎn)載于:https://www.cnblogs.com/hualuoshuijia/p/9803724.html

總結(jié)

以上是生活随笔為你收集整理的SectionList的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。