ReactNative:パケットリストコンポーネントSectionListコンポーネントの使用

一、概要
SectionList、パケットリスト、ReactNativeは、提供されるListViewおよびFlatListリストコンポーネントの後のもう一つの重要なパケットリストコンポーネントを中継する.その使い方は実際には前のFlatListとあまり差がありませんが、SectionListコンポーネントの性能はもっと高く、同時にSectionListコンポーネントはListViewコンポーネントよりずっと簡単です.以下に示すように、SectionListコンポーネントの機能は非常に強力です.ここでは、このコンポーネントのAPIについて詳しく検討します.

はプラットフォームに完全にまたがっています.

で構成可能な可視性コールバック.

リストタイトルサポート.

には、フッターのサポートがリストされています.

プロジェクトセパレータがサポートされています.

節タイトルサポート.

部分区切り文字がサポートされています.

異機種データおよびプロジェクトレンダリングのサポート.

を引いてリフレッシュします.

スクロール・ロード.

 
二、API
SectionListコンポーネントは同様に属性を直接提供する必要があり、オプションもある.以下の通りです

//    SectionBase    ,    SectionItemT
type SectionBase = {
  
  //     ，    
  data: Array,
 
  //           ，    
  key: string,   
 
  //       item  ，    
  renderItem?: ?(info: {item: SectionItemT, index: number}) => ?React.Element,  

  //   ，    
  ItemSeparatorComponent?: ?ReactClass, 
  
   //   ，    
   keyExtractor?: (item: SectionItemT) => string,  
};  

//      
//sections，       ，   SectionT，    SectionBase  
type RequiredProps> = {
    sections: Array,
};

//     
type OptionalProps> = {
  
  //               。       。
  renderItem: (info: {item: Item, index: number}) => ?React.Element,
  
  //              。   item    
  ItemSeparatorComponent?: ?ReactClass,
  
  //         。  
  ListHeaderComponent?: ?ReactClass,
  
  //        。  
  ListFooterComponent?: ?ReactClass,
 
  //         。    
  SectionSeparatorComponent?: ?ReactClass,
  
  //      ，          （      `PureComponent`）。 
  //    `renderItem`，Header，Footer             `data`         ，             。
  extraData?: any,
  
  //         ，                UI
  initialNumToRender: number,
  
  //                 。      ，               。         item.key，   react         。
  keyExtractor: (item: Item, index: number) => string,
  
  //          onEndReachedThreshold        。
  onEndReached?: ?(info: {distanceFromEnd: number}) => void,
 
  //                （           ）  ，    onEndReached  。 
  //  ，                    ，  0.5   “ onEndReached”。
  onEndReachedThreshold?: ?number,
  
  //    ，  “    ”       RefreshControl。 
  onRefresh?: ?() => void,
 
  //             ， `viewabilityConfig`     。
  onViewableItemsChanged?: ?(info: {
    viewableItems: Array,
    changed: Array,
  }) => void,
  
  //           ，     true。
  refreshing?: ?boolean,
 
  //          。         。  
  renderSectionHeader?: ?(info: {section: SectionT}) => ?React.Element,
  
  //           ，         。   iOS     ，            。
  stickySectionHeadersEnabled?: boolean,
};

 
三、使用
APIを見ると、受信したデータ配列sectionsにはSectionBaseが格納されており、各SectionBaseの内部にはdata配列とkey一意の識別が含まれている必要があり、残りの要素はオプションです.実はとても簡単で、今いくつかの機能を実現して、例は以下の通りです:
MySectionListView.js

import React, { Component } from 'react';

import {
    StyleSheet,
    View,
    Image,
    Text,
    Dimensions,
    SectionList
} from 'react-native';

const {width} = Dimensions.get('window');
const itemPadding = 20;
const itemWidth = (width-4*itemPadding)/3;

console.log('width:'+width);

const fetch_data = [
    {
        "type":"A",
        "flowers":[
            {
                icon:require('../image/flower1.png'),
                title:'  '
            },
            {
                icon:require('../image/flower1.png'),
                title:'  '
            },
            {
                icon:require('../image/flower1.png'),
                title:'  '
            }
        ]
    },
    {
        "type":"B",
        "flowers":[
            {
                icon:require('../image/flower2.png'),
                title:'  '
            },
            {
                icon:require('../image/flower2.png'),
                title:'  '
            },
            {
                icon:require('../image/flower2.png'),
                title:'  '
            }
        ]
    },
    {
        "type":"C",
        "flowers":[
            {
                icon:require('../image/flower3.png'),
                title:'   '
            },
            {
                icon:require('../image/flower3.png'),
                title:'   '
            },
            {
                icon:require('../image/flower3.png'),
                title:'   '
            }
        ]
    },
    {
        "type":"D",
        "flowers":[
            {
                icon:require('../image/flower4.png'),
                title:'  '
            },
            {
                icon:require('../image/flower4.png'),
                title:'  '
            },
            {
                icon:require('../image/flower4.png'),
                title:'  '
            }
        ]
    }
];

export default class MySectionListView extends Component{

    //  item  info: {item: Item, index: number}
    _renderItem(info){
        return (
            
                
                {info.item.title}
            
        )
    }

    //      info: {section: SectionT}
    _renderSectionHeader(info){
        return (
            
                {info.section.key}
                      style={{color:'white',fontSize: 25,justifyContent: 'center'}}>
                    {info.section.type}
                
            
        )
    }

    //    
    _listHeaderComponent(){
        return (
            200,backgroundColor:'red'}}/>
        )
    }

    //    
    _listFooterComponent(){
        return (
            200,backgroundColor:'green'}}/>
        )
    }

    render() {

        //sections   
        let sections = [];
        for (let i = 0; i < fetch_data.length; i++) {

            //  SectionBase  ，   key    ， data  
            let data = [];
            const type = fetch_data[i].type;
            const flowers = fetch_data[i].flowers;
            for(let j=0; j){
                data.push(flowers[j]);
            }
            sections.push({key: i, data: data, type:type});
        }

        return (
            
                <SectionList
                    sections={sections}
                    renderItem={this._renderItem}
                    keyExtractor={(item, index) => ("index:" + index + item)}
                    contentContainerStyle={styles.section}
                    renderSectionHeader={this._renderSectionHeader}
                    ListHeaderComponent={this._listHeaderComponent}
                    ListFooterComponent={this._listFooterComponent}
                />
            
        );
    }
}

const styles = StyleSheet.create({
   flex: {
       flex: 1,
   },
   center: {
       alignItems: 'center',
       justifyContent: 'center'
   },
   section: {
       flexDirection: 'row',
       flexWrap: 'wrap',
       backgroundColor:'#EEE'
   },
   item: {
       width: itemWidth,
       marginTop: 10,
       marginBottom: 10,
       marginLeft: itemPadding,
       justifyContent: 'center',
       backgroundColor: '#21c6cd'
   },
   image: {
       width: itemWidth,
       height: 150
   },
   text: {
       marginTop: 5,
       width: itemWidth,
       fontSize: 25,
       textAlign: 'center'
   },
   sectionHeader: {
       height: 30,
       width: width,
       backgroundColor: 'gray'
   }
});