React Native之SectionList使用扩展-分组折叠
目录
1.分组折叠效果图
2.实现思路
2.1维护一套显示的数据放在state中
2.2点击分组时修改this.state.cellDataArray中的数据
2.3判断分组下是否需要显示数据
3.示例完整代码
4.注意事项
4.1extraData
4.2data
4.3key
1.分组折叠效果图
2.实现思路
显示的数据如下：
//源收据
this.cellDatas = [
{key:'1',title:'section1',show:true,data:[
{key:'1',title:'row1'} ,
{key:'2',title:'row2'} ,
{key:'3',title:'row3'}
]
},
{key:'2',title:'section2',show:true,data:[
{key:'4',title:'row1'} ,
{key:'5',title:'row2'} ,
{key:'6',title:'row3'}
]
},
{key:'3',title:'section3',show:true,data:[
{key:'7',title:'row1'} ,
{key:'8',title:'row2'} ,
{key:'9',title:'row3'}
]
},
{key:'4',title:'section4',show:true,data:[
{key:'10',title:'row1'} ,
{key:'11',title:'row2'} ,
{key:'12',title:'row3'}
]
},
];SectionList定义：
render(){
/**
* 特别注意的地方:
* 如需用setState来更新页面 需要设置：
* extraData={this.state}
*/
return(
);
}2.1维护一套显示的数据放在state中
将要显示的数据this.cellDatas存储一份新数据放在state中，这份数据this.state.cellDataArray主要是用于切换分组显示时使用，可以动态对this.state.cellDataArray数据进行修改；
componentDidMount() {
let newArray = JSON.parse(JSON.stringify(this.cellDatas));
this.setState({
cellDataArray:newArray
});
}2.2点击分组时修改this.state.cellDataArray中的数据
定义 this.cellDatas数据show属性用于维护当前分组是显示还是隐藏的状态；
handlerSectionHeader=(info)=>{
//1.判断当前分组是显示还是隐藏
if(info.section.show){
//2.若当前分组是显示则隐藏分组，即赋予data数据[{key:'close'}]，这样显示单条内容是判断没有要显示的数据则返回空视图2.3判断分组下是否需要显示数据
_renderItem=(info)=>{
//如果title为undefined(解决空数据section之间不显示的问题)
if(info.item.title == undefined){
return(
{info.item.title}
);
}
}3.示例完整代码
import React, {Component, PureComponent} from 'react'
import{
AppRegistry,
StyleSheet,
Text,
View,
SectionList,
Alert,
TouchableOpacity
} from 'react-native'
export default class SectionListPage extends PureComponent{
constructor(props){
super(props);
this.state = {
//sectionList数据
cellDataArray:[]
};
//源收据
this.cellDatas = [
{key:'1',title:'section1',show:true,data:[
{key:'1',title:'row1'} ,
{key:'2',title:'row2'} ,
{key:'3',title:'row3'}
]
},
{key:'2',title:'section2',show:true,data:[
{key:'4',title:'row1'} ,
{key:'5',title:'row2'} ,
{key:'6',title:'row3'}
]
},
{key:'3',title:'section3',show:true,data:[
{key:'7',title:'row1'} ,
{key:'8',title:'row2'} ,
{key:'9',title:'row3'}
]
},
{key:'4',title:'section4',show:true,data:[
{key:'10',title:'row1'} ,
{key:'11',title:'row2'} ,
{key:'12',title:'row3'}
]
},
];
}
componentDidMount() {
let newArray = JSON.parse(JSON.stringify(this.cellDatas));
this.setState({
cellDataArray:newArray
});
}
handlerSectionHeader=(info)=>{//Alert.alert('sss', 'd');
if(info.section.show){
//清空要隐藏的数据条目
this.state.cellDataArray.map((item, index)=>{
if(item === info.section){
item.show = !item.show;
//清空要隐藏的数据条目
item.data=[{key:'close'}];
// Alert.alert('item.show',' '+item.show);
}
}
);
}else{
this.cellDatas.map((item, index) => {
//判断要显示的那个组
if(item.key === info.section.key){
//重新获取条目数据
let data = item.data;
this.state.cellDataArray.map((cellItem, index)=>{
if(cellItem === info.section){
cellItem.show = !cellItem.show;
cellItem.data = data;
}
});
}
});
}
/**
* 所以请先检查你的renderItem函数所依赖的props数据（包括data属性以及可能用到的父组件的state），
* 如果是一个引用类型（Object或者数组都是引用类型），则需要先修改其引用地址（比如先复制到一个新的Object或者数组中），
* 然后再修改其值，否则界面很可能不会刷新。
*/
let newsDatas = JSON.parse(JSON.stringify(this.state.cellDataArray));
this.setState({
cellDataArray:newsDatas,
});
}
_renderItem=(info)=>{
//如果title为undefined(解决空数据section之间不显示的问题)
if(info.item.title == undefined){
return(
{info.item.title}
);
}
}
_renderSectionHeader=(item)=>{
return (
{item.section.title}
);
}
render(){
/**
* 特别注意的地方:
* 如需用setState来更新页面 需要设置：
* extraData={this.state}
*/
return(
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
}
});4.注意事项
4.1extraData
特别注意的地方:
如需用setState来更新页面 需要设置：
extraData={this.state}
4.2data
分组数据中需要分组数据有data才能读到数据
{key:'1',title:'section1',show:true,data:[
{key:'1',title:'row1'} ,
{key:'2',title:'row2'} ,
{key:'3',title:'row3'}
]}4.3key
section和item都需要key，如果分组数据中没有key则可以用：
//定义指定key的函数
_keyExtractor=(item, index) => string;
参考：
https://www.jianshu.com/p/8c030c00a2c8
https://www.jianshu.com/p/d1710c54a91c