简体   繁体   English

React Native FlatList 忽略项目间距

[英]React Native FlatList ignoring item spacing

I'm really struggling to figure out why i can't get my FlatList to render items the way that I would expect.我真的很难弄清楚为什么我不能让我的 FlatList 以我期望的方式呈现项目。

I'm using react-query in order to fetch a data array.我正在使用 react-query 来获取数据数组。 I pass this array into my FlatList to be rendered, then I use a render function to render a list item.我将此数组传递给我的 FlatList 进行渲染,然后我使用渲染 function 来渲染列表项。 However my flat list completely ignores all of the item's padding and margin, sometimes.然而,我的平面列表有时会完全忽略所有项目的填充和边距。

Here's a snippet to better explain what I'm trying to do:这是一个片段,可以更好地解释我正在尝试做的事情:

function Component() {
  data = [
    {a: true, otherStuff},
    {b: true, otherStuff}
  ]
  
  function renderItem({item, index}) {
    if (item.a) {
      return <ListItemA/>
    }
     if (item.b) {
       return <ListItemB/>
  }

render(
  <FlatList
    renderitem={renderItem}
    data={data}
  />
  )
}

if you will upload the components code, it will be more clear.如果您将组件代码上传,它会更清楚。 try to use item separator and add spacing there https://reactnative.dev/docs/flatlist#itemseparatorcomponent a尝试使用item separator并在那里添加间距https://reactnative.dev/docs/flatlist#itemseparatorcomponent a

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM