美文网首页
RN 之 SectionListView

RN 之 SectionListView

作者: 浮生随笔 | 来源:发表于2018-07-30 16:16 被阅读17次

SectionListView

属性

  1. ItemSeparatorComponent {highlighted,leadingItem,leandingSection,section,trailingItem}
    返回一个行与行之间的分割组件,不会出现在第一行之前和最后一行之后。
    • highlighted 当前行(分割线上面👆的Item)是否是高亮状态
    • leadingItem 当前行分配到的数据源
    • leandingSection 目前我也没搞明白啥意思 这里是undefined
    • section 当前段分配到的数据源
    • trailingItem 尾段数据
  2. ListEmptyCompone 没有接收参数
    渲染一个cell为空时的缓冲组件
  3. ListFooterComponent 没有接收参数
    渲染整个组件的Footer
  4. ListHeaderComponent 没有接收参数
    渲染整个组件的Header
  1. SectionSeparatorComponent {highlighted,leadingItem,leandingSection,section,trailingItem}
    段分割组件

    • highlighted 当前行(分割线上面👆的Item)是否是高亮状态
    • leadingItem 当前行分配到的数据源 这里是undefined
    • leandingSection 目前我也没搞明白啥意思 这里是undefined
    • section 当前段分配到的数据源
    • trailingItem 尾段数据
  2. extraData
    如果有除data以外的数据用在列表中(不论是用在renderItem还是Header或者Footer中),请在此属性中指定。同时此数据在修改时也需要先修改其引用地址(比如先复制到一个新的Object或者数组中),然后再修改其值,否则界面很可能不会刷新。

文档说的挺乱,总而言之言而总之:sectionList的刷新首先决定于Data,当Data没变化,但是你想强制刷新UI的时候,有个状态控制,那么这个状态控制需要在这里写一下,关联一下,否则你的这个状态不会被关联,UI不会被刷新。

  1. initialNumToRender
    指定一开始渲染的item 数量,预加载item 数

  2. keyExtractor (item: ItemT, index: number) => string
    此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染的开销。若不指定此函数,则默认抽取item.key作为key值。若item.key也不存在,则使用数组下标。

  3. onEndReachedThreshold number
    数值。决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发

  4. onEndReached (info: {distanceFromEnd: number}) => void

    传入一个对象info,info包含number类型的distanceFromEnd属性。

  5. onViewableItemsChanged (info: {viewableItems: Array<ViewToken>, changed: Array<ViewToken>}) => void

    • viewableItems 可是Item对应的数据
    • changed 改变的数据
      可视元素发生变化时调用
  6. refreshing boolean
    等待新数据加载时此属性设置为true,列表会显示出正在加载的符号

  7. renderItem (info: {item: Item, index: number}) => ?React.Element<any>
    渲染每一个section中的item

    • item 每个item渲染所需数据
    • index item在其section中的位置索引
  8. renderSectionHeader?: {section: SectionT}
    接收一个对象,这个对象包含section属性,
    返回一个组件,用作段头

  9. sections ReadOnlyArray<SectionT>

    传入一个sections数组

    [
    {data:[{name:'nader'},{name:'chris'}],key:'A'},
    {data:[{name:'nick'},{name:'amanda'}],key:'B'},
    {data:[{name:'nick'},{name:'amanda'}],key:'C'},
    {data:[{name:'nick'}],key:'D'},
    

]
```

  1. stickySectionHeadersEnabled boolean

方法

  • scrollToLocation (params: object) -- {sectionIndex,itemIndex}:代码控制 UI交互跳转到指定位置
  • recordInteraction() 告诉ListView 交互已经发生了
  • flashScrollIndicators()显示指示滚动

相关文章

  • RN 之 SectionListView

    SectionListView 属性 ItemSeparatorComponent {highlighted,l...

  • 移花接木2-分组ListView

    效果图 如图SectionListView.gif,为了方便下面讲解实现原理,所以进行了着色。 实现原理 1.代码...

  • codepush3之Android原生引用集成

    codepush热更新codepush2之配置自己的服务器其实原生集成rn在集成codepush与新建rn项目集成...

  • RN之ScrollView

    React-Native之ScrollView ScrollView是React-Native自己包装的一个滚动视...

  • RN之Image

    React Nativ之Image组件 一个用于显示多种不同类型图片的React组件,包括网络图片、静态资源、临时...

  • RN之网络

    很多移动应用都需要从远程地址中获取数据或资源。你可能需要给某个rest API发起post请求以提交用户数据,又或...

  • RN之样式

    在React Native中,你并不需要学习什么特殊的语法来定义样式。我们仍然是使用JavaScript来写样式。...

  • ReactNative Animated详解(转)

    参考链接:React Native开发之动画(Animations) 最近ReactNative(以下简称RN)在...

  • iOS集成ReactNative跳转、传值

    iOS跳转RN界面iOS跳转RN界面传值iOS跳转不同的RN界面(一)iOS跳转不同的RN界面(二)RN界面跳转到...

  • RN学习之DatePickerIOS

    RN学习之DatePickerIOS date:选中的日期。 maximumDate:最大日期。选择的日期大于此日...

网友评论

      本文标题:RN 之 SectionListView

      本文链接:https://www.haomeiwen.com/subject/oqvfvftx.html