ReactNative学习笔记（七）使用滚动视图&长列表

滚动视图

ScrollView是一个通用的可滚动的容器，可以垂直、水平滚动（horizontal属性）

• horizontal 属性，配置 垂直or 水平滚动；
• pagingEnabled 属性，配置是否允许使用滑动手势对视图进行分页；

tips: 在IOS上，若ScrollView中只有一个元素，用户可以对元素进行缩放，可缩放的大小范围由minimumZoomScale和maximumZoomScale两个属性进行配置

ScrollView中的所有组件都会被渲染（包括不在屏幕内），适合用来显示数量不多的滚动元素，若需要显示较长的滚动列表，应使用功能差不多但性能更好的FlatList组件。

长列表

React Native提供了几个适用于展示长列表数据的组件，一般我们会使用FlatList或SectionList

• FlatList

  • data
    列表的数据源[{k1:v1, k2:vv1},{k1:v2, k2:vv2}]
  • renderItem
    从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

  FlatList组件用于显示一个垂直的滚动列表，其中的元素，结构近似仅数据不同；
不立即渲染所有元素，优先渲染屏幕上可见的元素

• SectionList

  • sections
  • renderItem

  SectionList用于渲染一组需要分组的数据