SectionList的使用

這個是效果：

第一步：准備數據源：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}>
                <SectionList
                    renderSectionHeader={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={() => <View
                        style={{backgroundColor: 'yellow', alignItems: 'center',justifyContent: 'center',width:dimension.width,height:50}}><Text>這個是我的表頭</Text></View>}
                    ListFooterComponent={() => <View
                        style={{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表示距離內容最底部的距離為當前列表可見長度的一半時觸發。