React Native FlatList - 可变列

Question

我正在开发一个无限滚动的产品列表，其中包含不同类型的产品。产品可以是特色产品，也可以不是特色产品。当产品有特色时，我们有一个产品卡片设计，它占据了 phone 的整个宽度，否则设计需要一个 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 属性设置为 2 可以稍微正确地显示产品，但会导致全宽特色商品出现问题。
考虑过将项目按 2 分块并让它们代表一个项目，但事实证明这在使用 Flow 时需要更多的开销

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

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

Answer 1

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

我认为您的 best/easiest 方法是第三种选择。你能做什么我认为以某种方式操纵你正在渲染的数据并将所有其他 "not featured" 项目分成两部分并将它们一起渲染。

例如

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

Answer 2

只需使用 RecyclerListView 即可。它比 FlatList 更快，并且在 Flipkart 上经过了实战测试。它支持交错布局。

Link: https://github.com/Flipkart/ReactEssentials

您可以在此处阅读更多相关信息：https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

React Native FlatList - 可变列

React Native FlatList - Variable columns

flexbox

react-native

react-native-android

react-native-ios