ReactNative 0.43版本加入了FlatList、SectionList更好的替代ListView。
文档我就不在这里拷贝了 自己先去看看 http://reactnative.cn/docs/0.47/flatlist.html 和 http://reactnative.cn/docs/0.47/sectionlist.html
废话不多说,先上个效果图
sectionList.gif接下来上代码。
import React, { Component,PureComponent } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
SectionList
} from 'react-native';
import SectionHeader from './SectionHeader'
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) => {
if (info.section.show) {
this.state.cellDataArray.map((item, index) => {
if (item === info.section) {
item.show = !item.show;
item.data = [{key:'close'}];
}
});
}else {
this.cellDatas.map((item,index) => {
if (item.key === info.section.key){
let data = item.data;
this.state.cellDataArray.map((cellItem,i) => {
if (cellItem === info.section){
cellItem.show = !cellItem.show;
cellItem.data = data;
}
});
}
});
}
let newDatas= JSON.parse(JSON.stringify(this.state.cellDataArray));
this.setState({
cellDataArray:newDatas
})
};
//sectionList头部
_ListHeaderComponent = () => {
return (
<View style={{height:35,backgroundColor:'#CD7F32',alignItems:'center',justifyContent:'center'}}>
<Text>
SectionList Header
</Text>
</View>
);
};
//sectionList底部
_ListFooterComponent = () => {
return (
<View style={{height:35,backgroundColor:'#CD7F32',alignItems:'center',justifyContent:'center'}}>
<Text>
SectionList Footer
</Text>
</View>
);
};
//section之间的间隔
_renderSectionSeparatorComponent = (info) => {
return(
<View style={{height:15,backgroundColor:'#9370DB'}}>
</View>
);
};
//cell之间的间隔
_renderItemSeparatorComponent = (info) => {
return(
<View style={{height:1,backgroundColor:'blue'}}>
</View>
);
};
//section头部
_renderSectionHeader = (item) => {
return (
<SectionHeader
info={item}
handlerSectionHeader = {this.handlerSectionHeader.bind(this)}
/>
);
};
//cell
_renderItem = (info) => {
//如果title为undefined (解决空数据section之间不显示问题)
if (info.item.title == undefined){
return(
<View>
</View>
);
}else {
return (
<View style={{height:40,backgroundColor:'white',justifyContent:'center'}}>
<Text style={{color:'red'}}>
{info.item.title}
</Text>
</View>
);
}
};
render() {
return (
<View style={styles.container}>
<SectionList
ListHeaderComponent={this._ListHeaderComponent}
ListFooterComponent={this._ListFooterComponent}
SectionSeparatorComponent={this._renderSectionSeparatorComponent}
ItemSeparatorComponent={this._renderItemSeparatorComponent}
renderSectionHeader={this._renderSectionHeader}
renderItem={this._renderItem}
sections={this.state.cellDataArray}
extraData={this.state}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
基本用法:
<SectionList
ListHeaderComponent={this._ListHeaderComponent}
ListFooterComponent={this._ListFooterComponent}
SectionSeparatorComponent={this._renderSectionSeparatorComponent}
ItemSeparatorComponent={this._renderItemSeparatorComponent}
renderSectionHeader={this._renderSectionHeader}
renderItem={this._renderItem}
sections={this.state.cellDataArray}
extraData={this.state}
/>
特别注意的地方:
如需用setState来更新页面 需要设置:
extraData={this.state}
另外1.数据中需要有data:才能读取数据
{key:'1',title:'section1',show:true,data:[
{key:'1',title:'row1'} ,
{key:'2',title:'row2'} ,
{key:'3',title:'row3'}
]}
section和item都需要key,如果不想手动增加key则可以用
keyExtractor: (item: Item, index: number) => string
自动生成。
有什么不对的请大家指出~谢谢。
完整Demo
https://github.com/RoarRain/react-native-SectionList
网友评论