React Native FlatList-可变列 [英] React Native FlatList - Variable columns

问题描述

我正在开发一个无限滚动的产品列表，其中包含不同类型的产品.可以推荐产品或不推荐产品.推荐产品时，我们的产品卡设计会占用手机的整个宽度，否则该设计需要2列的行

I am developing a infinitely scrolling list of products which contain different types of products. A product can be featured or not featured. When a product is featured, we have a product card design that takes up the full width of the phone, otherwise the design calls for a 2 column row

数据看起来像这样:

[
  {
    "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"
  }
]

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

For example, the list would look something like this:

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

但是，使用 FlatList 组件，我我没法实现这个设计的布局.

However, with the FlatList component, I'm not having luck achieving this design's layout.

• 将样式分别添加到全宽度的flex: 1和双列的flex: 0.5上，不允许换行，并且始终显示单列行
• 将numColumns道具设置为2可以正确显示产品，但会导致全宽特色商品出现问题.
• 关于将项目按2进行分块并将其表示为一个项目的想法，但是事实证明，在使用Flow时，这需要更多的开销

• Adding styles to each respective item flex: 1 on full width and flex: 0.5 on double column doesn't allow for wrapping columns and always displays a single column row
• Setting the numColumns prop to 2 displays the products somewhat properly, but causes issues with the full width featured item.
• Thought about chunking the items by 2 and having them represent one item, but that's proving to require much more overhead while using Flow

我一直在尝试使用FlatList来提高性能，但是我开始认为它可能不适合我所需的布局.

I was venturing down the path of using a FlatList for the performance benefits, but I'm starting to think it might not be suited for the layout that I require.

有人解决过吗?

推荐答案

据我所知，FlatList将数据中的每个项目呈现在其自己的行上.除非您操纵本机端来创建所需的行为组件，否则您所要求的行为是不可能的.

As far as I know FlatList renders each item in data on its own row. The desired behavior of what you ask is not possible unless you manipulate the native side to create a desired behavior component.

我认为您最好/最简单的方法是第三选择.我认为您可以做些什么，以某种方式处理要呈现的数据，并将其他所有未显示"的项目分组为两个，然后将它们呈现在一起.

I think your best/easiest way to go is third option. What you can do I think somehow manipulate your data being rendered and group every other "not featured" items in two and get them rendered together.

例如

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"
  }
]

这篇关于React Native FlatList-可变列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！