ReactNative FlatList SectionList

摘要：

主要写下刚学RN时的一点心得。学习一个新语言，首先当然看官方文档了，这里就不说了。主要说下看完文档之后该如何上手。
主要说两个：

1. 路由
2. 页面当中主要的两个组件FlatList、SectionList

react-native-router-flux

1. router 下第一层如果是Scene,必须设置key='root',因为需要有一个容器来切换Scene，可以使用Stack包装
2. 默认第一个Scene为默认显示，initial和init属性是不一样的

List应该是项目中用的比较多的组件，所以就研究了下RN下的两个列表组件FlatList和SectionList
任何问题都是从需求中发现的，下面就从两个简单需求中解决FlatList和SectionList几个常见问题

FlatList

需求：在区域A中显示区域B的FlatList，如果内容少就居中显示在区域A中，如果内容多就再区域A中滚动显示

Flatlist

FlatList内容样式问题

如果要设置FlatList内容的样式需要在contentContainerStyle中设置

设置FlatList高度问题

1. FlatList等类似容器类的空间，默认是有flex:1属性的,再次设置flex是不起作用的。
2. FlatList contentContainerStyle不能设置flex:1和固定高度，否则不能滑动。
3. 如果父容器flex-direction为column时想要设置FlatList高度必须在外层包裹一层View，设置View的高度

FlatList内容少时，居中问题

需要在FlatList外再包一层View包裹FlatList高度，因为flex是0，所以View的高度是FlatList的内容高度

FlatList宽度占满屏幕问题

想要设置宽度需要设置View的alighSelf为stretch。水平情况也是同样的道理

SectionList

需求：实现类似微信钱包这种带标题的横向列表，默认SectionList不支持，这里介绍三种方式

SectionList

方案一：（缺点：有警告 flex-wrap is not support with the virtualizedlist. 目前github issues未解决）

1. 设置contenContainerStyle flex-direction: row flex-wrap: wrap
2. 设置sectionHeader宽度为屏幕宽度
3. 如需子元素等宽，设置子元素宽度

方案二：

1. renderItem void
2. renderSectionHeader 用FlatList，设置FlatList header numColumns

方案三：

1. 更改数据源，item数据为List
2. renderItem 用FlatList，设置FlatList header numColumns