react-native-waterfall-flow

React Native 高性能瀑布流组件

特性

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

Changelogs

• [1.1.5]

  • 解决安卓端瀑布流相邻高度差距过大会有空白的问题

• [1.1.4]

  • 无需手动设置item高度，一切计算工作由瀑布流组件内部完成
  • 支持随时变化高度的item，体验良好
  • 进一步提升体验，性能表现极佳

展示案例

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

截屏

截图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.