這個是效果：

第一步：準備數據源：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("到達底部")}}// onEndReachedThreshold={0}// stickySectionHeadersEnabled={true}ListHeaderComponent={() => <Viewstyle={{backgroundColor: 'yellow', alignItems: 'center',justifyContent: 'center',width:dimension.width,height:50}}><Text>這個是我的表頭</Text></View>}ListFooterComponent={() => <Viewstyle={{backgroundColor: 'red', alignItems: 'center',width:dimension.width}}><Text>這個是我的表尾</Text></View>}contentContainerStyle={styles.sectionListStyle}//設置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的下面兩句代碼刪除，則會出現單行情況，如果有興趣，自行調試

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

?

?

?

?

renderItem：定義每個元素組件的渲染方式，默認傳入參數rowData，要訪問其中的"title"可以通過rowData.item.title訪問到。
ItemSeparatorComponent：定義每個元素之間分割組件

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

ListEmptyComponent：data為空時顯示的組件

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

?

轉載于:https://www.cnblogs.com/hualuoshuijia/p/9803724.html

總結

以上是生活随笔為你收集整理的SectionList的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。