先看下我們要實(shí)現(xiàn)的效果
擴(kuò)展JavaScript Array map()用法鏈接
sectionList1.gif
準(zhǔn)備工作
我們先來看看SectionList的數(shù)據(jù)源格式
<SectionList
renderItem={({item}) => <ListItem title={item.title} />}
renderSectionHeader={({section}) => <H1 title={section.key} />}
sections={[ // 不同section渲染相同類型的子組件
{data: [{...}...], ...},
{data: [{...}...], ...},
{data: [{...}...], ...},
]}
/>
這里我給出一個(gè)JSON數(shù)組作為SectionList 的數(shù)據(jù)源,簡單明了,效果大家一看便知道了吧,跟通訊錄差不多的效果.我就不貼圖了
[
{
"title":"第一組",
"data":[
{
"title":"第一組-第一行"
},
{
"title":"第一組-第二行"
}
]
},
{
"title":"第二組",
"data":[
{
"title":"第二組-第一行"
},
{
"title":"第二組-第二行"
}
]
}
]
但是要實(shí)現(xiàn)每組類似collectionView的布局還需要改變一下數(shù)據(jù)格式,上面的data數(shù)組裝的都是一個(gè)個(gè)字典對象,那么我們現(xiàn)在要讓data數(shù)組里面裝一個(gè)數(shù)組,數(shù)組里在裝一個(gè)個(gè)字典,data就變成一個(gè)二維數(shù)組,json數(shù)據(jù)將會(huì)變成這樣
[
{
"title":"第一組",
"data":[
[
{
"title":"第一組-第一行"
},
{
"title":"第一組-第二行"
}
]
]
},
{
"title":"第二組",
"data":[
[
{
"title":"第二組-第一行"
},
{
"title":"第二組-第二行"
}
]
]
}
]
這樣在SectionList的renderItem方法里傳遞的每個(gè)Item就是一個(gè)包含多個(gè)對象的數(shù)組
Snip20170815_8.png
_renderItem = ({item})=>{
return (
{/*Item是數(shù)組,view展示效果類似collectionView*/}
<View style={styles.ItemStyle}>
{ item.map((item, i) => this.renderExpenseItem(item, i))}
</View>
)
};
說到這里我想大家應(yīng)該都理解了,下面貼出全部代碼
/**
* 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')// 給每個(gè)Item設(shè)置key
_renderItem = ({item})=>{
{/*
map()是JavaScript數(shù)組對象的屬性;
通過指定函數(shù)處理數(shù)組的每個(gè)元素，并返回處理后的數(shù)組。
*/}
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;
項(xiàng)目中的JSON數(shù)據(jù)
[
{
"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":"夏天"
}
]
]
}
]
