react-native-waterfall-flow v1.1.5

特性

• 性能方面表现突出，渲染速度快，滚动体验良好
• 无需手动设置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

• 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

numColumns

ListHeaderComponent

示例用法：

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

ListFooterComponent

示例用法：

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

ListEmptyComponent

示例用法：

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

onEndReached

(info: {distanceFromEnd: number}) => void

onRefresh

() => void

refreshing

style

contentContainerStyle

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

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

方法

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

scrollToEnd()

scrollToEnd([params])

滚动到瀑布流列表的底部

参数：

params的参数如下:

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

方法调用示例

绑定ref:

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

调用方法:

this.listRef.scrollToEnd()

scrollToIndex()

scrollToIndex([params])

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

参数：

params的参数如下:

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

scrollToOffset()

scrollToOffset([params])

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

参数：

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.