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道具设置为2可以稍微正确地显示产品，但会导致全宽特色项目出现问题。
考虑将项目分块2并让它们代表一个项目，但这证明在使用Flow时需要更多的开销

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

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

Answer 1

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

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

例如

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进行了战斗测试。它支持交错布局。

链接：https://github.com/Flipkart/ReactEssentials

您可以在此处详细了解：https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

React Native FlatList - 变量列

2 个答案: