react-native - React Native FlatList - 变量列

Question

我正在开发一个无限滚动的产品列表，其中包含不同类型的产品。一个产品可以有特色，也可以没有特色。当一个产品被推荐时，我们有一个产品卡设计，占据手机的整个宽度，否则设计需要 2 列行

数据看起来像这样:

[
  {
    "type": "featured-product",
    "name": "Product",
    "description: "yadda yadda"
  },
  {
    "type": "product",
    "name": "Another Product",
    "description: "yadda yadda"
  },
  {
    "type": "product",
    "name": "And Another Product",
    "description: "yadda yadda"
  },
  {
    "type": "product",
    "name": "One more Product",
    "description: "yadda yadda"
  }
  {
    "type": "product",
    "name": "Yet another",
    "description: "yadda yadda"
  },
  {
    "type": "featured-product",
    "name": "This one's Featured though",
    "description: "yadda yadda"
  }
]

例如，列表看起来像这样:

--------------
|            |
|  Featured  |
|            |
--------------
|     ||     |
| Not || Not |
|     ||     |
--------------
|     ||     |
| Not || Not |
|     ||     |
--------------
|            |
|  Featured  |
|            |
--------------
|     ||     |
| Not || Not |
|     ||     |
--------------
|     ||     |
| Not || Not |
|     ||     |
--------------

然而，随着 FlatList 组件，我没有运气实现这个设计的布局。

为每个项目添加样式 flex: 1全宽和 flex: 0.5双列不允许换行并始终显示单列行

设置 numColumns prop to 2 稍微正确地显示产品，但会导致全宽特色项目出现问题。

考虑将项目按 2 分块并让它们代表一个项目，但事实证明，在使用 Flow

时需要更多的开销

我正在冒险使用 FlatList 以获得性能优势，但我开始认为它可能不适合我需要的布局。

有没有人解决过这个问题？

Answer 1

据我所知，FlatList 在自己的行中呈现数据中的每个项目。除非您操纵 native 端以创建所需的行为组件，否则您所要求的所需行为是不可能的。

我认为你最好/最简单的方法是第三种选择。你能做什么我认为以某种方式操纵你正在渲染的数据并将所有其他“非特色”项目分成两个并将它们一起呈现。

例如

renderItem({item}) {
  if (item.notFeatured === true) return <NotFeaturedRow data={item.items} />
  else return <FeaturedRow data={item} />
}

const data = [
  {
    "type": "featured-product",
    "name": "Product",
    "description: "yadda yadda"
  },
  {
    notFeatured: true, 
    items: [
      {
        "type": "product",
        "name": "Another Product",
        "description: "yadda yadda"
     },
     {
        "type": "product",
        "name": "And Another Product",
        "description: "yadda yadda"
      }    
    ]
  },
  {
    notFeatured: true, 
    items: [
      {
        "type": "product",
        "name": "Another Product",
        "description: "yadda yadda"
     },
     {
        "type": "product",
        "name": "And Another Product",
        "description: "yadda yadda"
      }    
    ]
  },
  {
    "type": "featured-product",
    "name": "This one's Featured though",
    "description: "yadda yadda"
  }
]