React-Native之SectionList

先看下我们要实现的效果
扩展JavaScript Array map()用法链接

sectionList1.gif

准备工作

我们先来看看SectionList的数据源格式

<SectionList
    renderItem={({item}) => <ListItem title={item.title} />}
    renderSectionHeader={({section}) => <H1 title={section.key} />}
    sections={[ // 不同section渲染相同类型的子组件
        {data: [{...}...],  ...},
        {data: [{...}...],  ...},
        {data: [{...}...],  ...},
]}
/>

这里我给出一个JSON数组作为SectionList 的数据源,简单明了,效果大家一看便知道了吧,跟通讯录差不多的效果.我就不贴图了

[
  {
    "title":"第一组",
    "data":[
      {
        "title":"第一组-第一行"
      },
      {
        "title":"第一组-第二行"
      }
    ]
  },
  {
    "title":"第二组",
    "data":[
      {
        "title":"第二组-第一行"
      },
      {
        "title":"第二组-第二行"
      }
    ]
  }

]

但是要实现每组类似collectionView的布局还需要改变一下数据格式,上面的data数组装的都是一个个字典对象,那么我们现在要让data数组里面装一个数组,数组里在装一个个字典,data就变成一个二维数组,json数据将会变成这样

[
  {
    "title":"第一组",
    "data":[
      [
        {
          "title":"第一组-第一行"
        },
        {
          "title":"第一组-第二行"
        }
      ]
    ]
  },
  {
    "title":"第二组",
    "data":[
     [
       {
         "title":"第二组-第一行"
       },
       {
         "title":"第二组-第二行"
       }
     ]
    ]
  }

]

这样在SectionList的renderItem方法里传递的每个Item就是一个包含多个对象的数组

Snip20170815_8.png

_renderItem = ({item})=>{
        return (
            {/*Item是数组,view展示效果类似collectionView*/}
            <View style={styles.ItemStyle}>
                { item.map((item, i) => this.renderExpenseItem(item, i))}
            </View>
        )
    };

说到这里我想大家应该都理解了,下面贴出全部代码

/**
 * Created by mac on 2017/8/15.
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    SectionList,
    Image,
    TouchableOpacity
} from 'react-native';

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
var itemW = width/4
var fansArr = require('../../Component/Home/fansArr.json')

export default class ShopDetail extends Component {

    static navigationOptions = {
        title : '匹配记录',
        headerTitleStyle:{

        },
        headerStyle:{
            backgroundColor:'white'
        }
    };

    _extraUniqueKey = (item ,index) => (item+index+'index')// 给每个Item设置key
    _renderItem = ({item})=>{
        {/*
            map()是JavaScript数组对象的属性;
            通过指定函数处理数组的每个元素，并返回处理后的数组。
        */}
        return (
            <View style={styles.ItemStyle}>
                { item.map((item, i) => this.renderExpenseItem(item, i))}
            </View>
        )
    };
    renderExpenseItem(item, i) {

        return <TouchableOpacity key={i} onPress={() => this._pressRow(item)} underlayColor="transparent">
            <View style={styles.row}>
                < Image style={{height:itemW,width:itemW-5}} source={{uri:item.img}}/>
                <Text style={{marginTop:10}}>{item.name}</Text>
            </View>
        </TouchableOpacity>;
    }
    _pressRow(item) {
       alert(item.name)
    }

    _sectionComp = ({section})=>{
        return(
            <Text style={{height:25,backgroundColor:'orange'}}>{section.title}</Text>
        )
    }
    render() {
        return (
            <SectionList
                contentContainerStyle={styles.containerStyle}
                sections={fansArr}
                renderItem={this._renderItem}
                renderSectionHeader={this._sectionComp}
                keyExtractor = {this._extraUniqueKey} 
            />
        );
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    containerStyle:{

        backgroundColor:'white'
    },
    ItemStyle:{
        flexDirection:'row',
        flexWrap:'wrap',
       // backgroundColor:'red'
    },
    row:{
        //height:itemW,
        width:itemW,
        alignItems:'center',
        marginTop:8,
        marginBottom:8
    }

});

module.exports = ShopDetail;

项目中的JSON数据

[
  {
    "title":"A",
    "key":"A",
    "data":[
      [
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        }
      ],
      [
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        }
      ]
    ]
  },
  {
    "title":"B",
    "key":"B",
    "data":[
      [
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        }
      ]
    ]
  },
  {
    "title":"C",
    "key":"C",
    "data":[
      [
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },{
        "img":"znb 2",
        "name":"夏天"
      }
      ]
    ]
  },
  {
    "title":"D",
    "key":"D",
    "data":[
      [
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        },
        {
          "img":"znb 2",
          "name":"夏天"
        }
      ]
    ]
  }
]