Skip to content

axerjs/react-native-waterfall-flow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native 高性能瀑布流组件

Current npm package version. react-native-waterfall-flow is released under the MIT license. code style

特性

  • 性能方面表现突出,渲染速度快,滚动体验良好
  • 无需手动设置item高度,一切计算工作由组件内部完成
  • 属性和方法与FlatList完全一致,易于上手

Changelogs

展示案例

下面展示的是一个包括下拉刷新,上拉加载更多的高性能瀑布流列表

截屏

截图gif

安装

v1.1.5

npm install react-native-waterfall-flow --save

基本使用

import WaterfallFlow from 'react-native-waterfall-flow'
<WaterfallFlow
  data={data}
  numColumns={2}
  renderItem={({ item, index, columnIndex }) => {
    return (
      <View>
        <Text>index: {index}</Text>
        <Text>columnIndex: {columnIndex}</Text>
      <View/>
    )
  }}
  ...
/>

属性

几乎所有FlatList的属性都是支持的,这里只列出一些常用的属性,其余属性可查看FlatList文档

renderItem

Type Required Description
function true 用于将当前item渲染到列表中
  • item (Object): 当前项的数据
  • index (number): 当前项的索引
  • columnIndex (number): 当前项在列表中的第几列

示例用法:

<WaterfallFlow
  renderItem={({ item, index, columnIndex }) => {
    return (
      <View>
        <Text>index: {index}</Text>
        <Text>columnIndex: {columnIndex}</Text>
      <View/>
    )
  }}
  ...
/>

如何设置间距

renderItem方法暴露出了columnIndex,该属性表示当前item在列表中第几列,这样你就能够自由的控制每个item的上下左右间距了。item的宽度等于 瀑布流容器的宽度 / numColumns

示例用法:

<WaterfallFlow
  renderItem = {({ item, index, columnIndex }) => {
    return (
      <View
        style={{
          paddingLeft: columnIndex === 0 ? 12 : 6,
          paddingRight: columnIndex === 0 ? 6 : 12,
          paddingTop: 3,
          paddingBottom: 3
        }}
      >
      <View/>
    )
  }}
  ...
/>

data

Type Required Description
array true 瀑布流数据源,可以是任意内容的数组

numColumns

Type Required Description
number false 瀑布流的列数,默认为2,即两列

ListHeaderComponent

Type Required Description
component, function false 头部组件。可以是 React Component 或 render 函数。

示例用法:

<WaterfallFlow
  ListHeaderComponent = {
    <View>
      <Text>this is header<Text>
    <View/>
  }
  ...
/>

ListFooterComponent

Type Required Description
component, function false 尾部组件。可以是 React Component 或 render 函数。

示例用法:

<WaterfallFlow
  ListFooterComponent = {
    <View>
      <Text>this is footer<Text>
    <View/>
  }
  ...
/>

ListEmptyComponent

Type Required Description
component, function false 列表为空时渲染该组件。可以是 React Component 或 render 函数

示例用法:

<WaterfallFlow
  ListEmptyComponent = {
    <View>
      <Text>no data here<Text>
    <View/>
  }
  ...
/>

onEndReached

(info: {distanceFromEnd: number}) => void
Type Required Description
function false 当列表滚动到底部是调用

onRefresh

() => void
Type Required Description
function false 如果设置了此选项,则会在列表头部添加一个标准的RefreshControl 控件,以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。

refreshing

Type Required Description
boolean false 在等待加载新数据时将此属性设为 true,列表就会显示出一个正在加载的符号。

style

Type Required Description
view styles false 用于设置瀑布流外层样式,默认会有{ flex: 1 }的样式,即高度充满父容器

contentContainerStyle

Type Required Description
view styles false 瀑布流内容容器样式

建议将其用于设置容器背景色。 示例:

<WaterfallFlow
  contentContainerStyle={{ backgroundColor: '#f9f9f9' }}
  ...
/>

方法

所有和方法和FlatList保持一致,这里只列出几个常用的,其余方法可查看FlatList文档

scrollToEnd()

scrollToEnd([params])

滚动到瀑布流列表的底部

参数:
Prop Type Required
params object false

params的参数如下:

  • 'animated' (boolean) - 是否有滚动动画. 默认 true.

方法调用示例

绑定ref:

<WaterfallFlow
  ref={ref => this.listRef = ref}
  ...
/>

调用方法:

this.listRef.scrollToEnd()

scrollToIndex()

scrollToIndex([params])

将位于指定位置的元素滚动到可视区的指定位置,当viewPosition 为 0 时将它滚动到屏幕顶部,为 1 时将它滚动到屏幕底部,为 0.5 时将它滚动到屏幕中央。

参数:
Prop Type Required
params object true

params的参数如下:

  • 'animated' (boolean) - 是否有滚动动画. 默认 true
  • 'index' (number) - 滚动到指定元素的下标。 必须设置该属性
  • 'viewOffset' (number) - 偏移最终目标位置的固定像素数
  • 'viewPosition' (number) - 为 0 时将它滚动到屏幕顶部,为 1 时将它滚动到屏幕底部,为 0.5 时将它滚动到屏幕中央

scrollToOffset()

scrollToOffset([params])

滚动列表到指定的偏移(以像素为单位),等同于ScrollView的scrollTo方法。

参数:
Prop Type Required
params object true

params的参数如下:

  • 'animated' (boolean) - 是否有滚动动画. 默认 true
  • 'offset' (number) - 要滚动到的偏移量。必须设置该属性

示例

示例代码 是一个expo app, 像这样启动项目

cd examples
npm i
npm start

License

react-native-waterfall-flow is MIT licensed, as found in the LICENSE file.