先看下我们要实现的效果
扩展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":"夏天"
}
]
]
}
]
