React-Native之SectionList

写这篇文章的起因是项目中遇到了级联列表的需求,而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);