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

滚动视图

ScrollView是一个通用的可滚动的容器,可以垂直、水平滚动(horizontal属性)

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

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

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

长列表

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

  • FlatList

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

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

  • SectionList

    • sections
    • renderItem

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容