滚动视图
ScrollView
是一个通用的可滚动的容器,可以垂直、水平滚动(horizontal属性)
- horizontal 属性,配置 垂直or 水平滚动;
- pagingEnabled 属性,配置是否允许使用滑动手势对视图进行分页;
tips: 在IOS上,若ScrollView中只有一个元素,用户可以对元素进行缩放,可缩放的大小范围由minimumZoomScale和maximumZoomScale两个属性进行配置
ScrollView中的所有组件都会被渲染(包括不在屏幕内),适合用来显示数量不多的滚动元素,若需要显示较长的滚动列表,应使用功能差不多但性能更好的FlatList组件。
长列表
React Native提供了几个适用于展示长列表数据的组件,一般我们会使用FlatList或SectionList
-
- data
列表的数据源[{k1:v1, k2:vv1},{k1:v2, k2:vv2}] - renderItem
从数据源中逐个解析数据,然后返回一个设定好格式的组件来渲染。
FlatList组件用于显示一个垂直的滚动列表,其中的元素,结构近似仅数据不同;
不立即渲染所有元素,优先渲染屏幕上可见的元素
- data
-
- sections
- renderItem
SectionList用于渲染一组需要分组的数据