摘要:
主要写下刚学RN时的一点心得。学习一个新语言,首先当然看官方文档了,这里就不说了。主要说下看完文档之后该如何上手。
主要说两个:
- 路由
- 页面当中主要的两个组件FlatList、SectionList
react-native-router-flux
- router 下第一层如果是Scene,必须设置key='root',因为需要有一个容器来切换Scene,可以使用Stack包装
- 默认第一个Scene为默认显示,initial和init属性是不一样的
List应该是项目中用的比较多的组件,所以就研究了下RN下的两个列表组件FlatList和SectionList
任何问题都是从需求中发现的,下面就从两个简单需求中解决FlatList和SectionList几个常见问题
FlatList
需求:在区域A中显示区域B的FlatList,如果内容少就居中显示在区域A中,如果内容多就再区域A中滚动显示
FlatList内容样式问题
如果要设置FlatList内容的样式需要在contentContainerStyle中设置
设置FlatList高度问题
- FlatList等类似容器类的空间,默认是有flex:1属性的,再次设置flex是不起作用的。
- FlatList contentContainerStyle不能设置flex:1和固定高度,否则不能滑动。
- 如果父容器flex-direction为column时想要设置FlatList高度必须在外层包裹一层View,设置View的高度
FlatList内容少时,居中问题
需要在FlatList外再包一层View包裹FlatList高度,因为flex是0,所以View的高度是FlatList的内容高度
FlatList宽度占满屏幕问题
想要设置宽度需要设置View的alighSelf为stretch。水平情况也是同样的道理
SectionList
需求:实现类似微信钱包这种带标题的横向列表,默认SectionList不支持,这里介绍三种方式
方案一:(缺点:有警告 flex-wrap is not support with the virtualizedlist. 目前github issues未解决)
- 设置contenContainerStyle flex-direction: row flex-wrap: wrap
- 设置sectionHeader宽度为屏幕宽度
- 如需子元素等宽,设置子元素宽度
方案二:
- renderItem void
- renderSectionHeader 用FlatList,设置FlatList header numColumns
方案三:
- 更改数据源,item数据为List
- renderItem 用FlatList,设置FlatList header numColumns