写这篇文章的起因是项目中遇到了级联列表的需求,而RN里面又没有这种写好的Demo,看江清清大神的博客发现是ListView的版本并且没有实现内部购物车的功能,所以我决定写一个用FlatList+SectionList来完成的级联列表,UI是仿照饿了么来搭建的。
(别和我说修改源码！戒了！)
下面介绍下SectionList:
<SectionList renderItem={({item}) => <ListItem title={item.title} />}
renderSectionHeader={({section}) => <Header title={section.key} />}
sections={[
// 不同section渲染相同类型的子组件
{data: [...], title: ...},
{data: [...], title: ...},
{data: [...], title: ...}, ]}/>
<SectionList sections={[
// 不同section渲染不同类型的子组件
{data: [...], renderItem: ...},
{data: [...], renderItem: ...},
{data: [...], renderItem: ...}, ]}/>
这里需要注意的点:
1.renderSectionHeader里面的参数必须是{section},不然无效。
2.renderItem里面的参数必须是{item},不然无效。
3.后台返回的json数据格式必须是data+title这种,开始还很疑惑不规定格式下是如何找到是哪行的。
4.key如果没有加的话会出现数据加载不出的问题(虽然我没出现过)。为了安全起见我加了key并且给sectionList加了keyExtractor。
简单的介绍下常用属性:
Data:数据源 ,目前只支持基本的数组类型,需要加载其它特殊的数据结构 那么需要使用VirtualizedList(这货就是FlatList和sectionList的原型)
renderItem:行内容,可以在此属性内布局cell样式,记住参数为{item}
ListHeaderComponent: 头部组件
ListFooterComponent：尾部组件
onViewableItemsChanged:在可见行元素变化时调用(我是用在滑动列表的时候来让级联列表左边的FlatList的item进行改变)
getItemLayout:类似于iOS原生里面的预估高度，前提是你可以提前知道内容的高度。如果你的行高是固定的，getItemLayout用起来就既高效又简单，类似下面这样：
getItemLayout={(data, index) => ( {length: 行高, offset: 行高 * index, index} )}如果有分割线记得也一并加上！
SectionSeparatorComponent:分割线
然后介绍下常用方法:
scrollToLocation:参数中的sectionIndex无效(不知道是不是bug) 需要移动位置就用itemIndex好了。viewPosition:0(最顶端)0.5(中间)1(最底端)
代码:(以下出自网络)
import React, { Component } from 'react';
import {
AppRegistry,
View,
Text,
SectionList,
} from 'react-native';
class HomeScreen extends React.Component {
constructor(props) {
super(props);
}
_renderItem = (info) => {
var txt = ' ' + info.item.title;
return <Text style={{ height: 60, textAlignVertical: 'center',backgroundColor: "#ffffff", color: '#5C5C5C', fontSize: 15 }}>{txt}</Text> }
_sectionComp = (info) => {
var txt = info.section.key;
return <Text
style={{ height: 50, textAlign: 'center', textAlignVertical: 'center', backgroundColor: '#9CEBBC', color: 'white', fontSize: 30 }}>{txt}</Text> }
render() {
var sections = [
{ key: "A", data: [{ title: "阿童木" }, { title: "阿玛尼" }, { title: "爱多多" }] },
{ key: "B", data: [{ title: "表哥" }, { title: "贝贝" }, { title: "表弟" }, { title: "表姐" }, { title: "表叔" }] },
{ key: "C", data: [{ title: "成吉思汗" }, { title: "超市快递" }] },
{ key: "W", data: [{ title: "王磊" }, { title: "王者荣耀" }, { title: "往事不能回味" },{ title: "王小磊" }, { title: "王中磊" }, { title: "王大磊" }] },
];
return (
<View style={{ flex: 1 }}>
<SectionList
renderSectionHeader={this._sectionComp}
renderItem={this._renderItem}
sections={sections}
ItemSeparatorComponent={() => <View><Text></Text></View>}
ListHeaderComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={{ fontSize: 18, color: '#ffffff' }}>通讯录</Text></View>}
ListFooterComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={{ fontSize: 18, color: '#ffffff' }}>通讯录尾部</Text></View>}
/>
</View>
);
}
}
AppRegistry.registerComponent('App', () => HomeScreen);
