瀑布流布局

瀑布流布局允许您创建高度不同的项目网格。它是展示不同大小的图像集合的绝佳方式。

要开始使用，请从 @shopify/flash-list 导入 MasonryFlashList，并像使用 FlashList 一样使用它

import React from "react";
import { View, Text, StatusBar } from "react-native";
import { MasonryFlashList } from "@shopify/flash-list";
import { DATA } from "./data";

const MyMasonryList = () => {
  return (
    <MasonryFlashList
      data={DATA}
      numColumns={2}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      estimatedItemSize={200}
    />
  );
};

注意： 如果您希望 MasonryFlashList 优化项目排列，请启用 optimizeItemArrangement 并传递一个有效的 overrideItemLayout 函数。

不支持的属性

与 FlashList 相比，MasonryFlashList 不支持某些属性

• horizontal
• inverted
• initialScrollIndex
• viewabilityConfigCallbackPairs
• onBlankArea

其他属性

MasonryFlashList 在 FlashList 的基础上支持以下附加属性

optimizeItemArrangement

optimizeItemArrangement?: boolean;

如果启用，MasonryFlashList 将尝试通过修改项目顺序来减少列高度的差异。如果为 true，则必须指定 overrideItemLayout。默认值为 false。

getColumnFlex

getColumnFlex?: (
  items: T[],
  columnIndex: number,
  maxColumns: number,
  extraData?: any
) => number;

getColumnFlex 允许您更改列表的列宽。如果您希望某些列比其他列更宽，这将很有帮助。

示例

// if `numColumns` is `3`, you can return `2` for `index 1` and `1` for the rest to achieve a `1:2:1` split by width.
getColumnFlex={(items, index, maxColumns, extraData) => {
    return index === 1 ? 2 : 1;
}}

renderItem 参数中的附加信息

export interface MasonryListRenderItemInfo<TItem>
  extends ListRenderItemInfo<TItem> {
  columnSpan: number;
  columnIndex: number;
}

使用 MasonryFlashList 时，renderItem 属性回调将在 info 对象上调用两个附加属性。

columnIndex：一个数字，表示项目渲染所在列的索引。当使用 optimizeItemArrangement 时，这变得更加重要，因为项目不再线性地分布在各列中。

columnSpan：一个数字，表示给定项目可以跨越的列数，目前这将始终返回 1。

方法

MasonryFlashList 公开了 FlashList 的一些方法。它们是

scrollToEnd()

scrollToEnd?: (params?: { animated?: boolean | null | undefined });

滚动到内容的末尾。

scrollToOffset()

scrollToOffset(params: {
  animated?: boolean | null | undefined;
  offset: number;
});

滚动到列表中特定的内容像素偏移量。

参数 offset 期望滚动的偏移量。

参数 animated (默认为 false) 定义列表在滚动时是否应该动画。