无法连续渲染平面列表项

Question

我正在使用平面列表从 faker js 渲染一些数据，当我使用默认的 flexDirection: "column" 渲染类型时一切正常，但是我想渲染行中的项目并且此代码不起作用。

    <FlatList
      style={{
        flexDirection: "row",
        flexWrap: "wrap"
      }}
      data={fakePeople}
      renderItem={renderItem}
      keyExtractor={(item) => item.fullName}
    />

没有渲染任何东西，但是一旦我使用 flexDirection: "row", 一切正常。

这里有一个link演示

https://codesandbox.io/s/nifty-galois-5zpnp1?file=/src/App.js:718-916

这是一个错误还是 React native flatlist 不支持行布局？

Answer 1

您必须使用 horizontal FlatList 属性作为 documentation says , and if you want to make some like grid layout you can use numColumns prop https://reactnative.dev/docs/flatlist#numcolumns

我编辑了几个你的codesandbox

Answer 2

像这样使用 horizontal 道具，

<FlatList
  horizontal
  data={fakePeople}
  renderItem={renderItem}
  keyExtractor={(item) => item.fullName}
/>

或者如果您希望每列有多个项目

<FlatList
  numColumns={3}
  data={fakePeople}
  renderItem={renderItem}
  keyExtractor={(item) => item.fullName}
/>

无法连续渲染平面列表项

Unable to render flatlist items in a row

react-native

react-native-flatlist