React Native FlatList numColumns和flex justifyContent问题

i86rm4rw 于 2023-06-06 发布在 React

关注(0)|答案(4)|浏览(170)

我有一个平面列表，我想显示在一个网格一样的时尚使用了100%的宽度的容器，但我似乎不能实现这与平面列表。
空间之间，因为我去了双方（如图）空间周围的中心，在容器中的方块，空间均匀地做同样的，灵活的开始与marginRight是不准确的。完全不确定如何实现这一点？谢谢

<FlatList
    numColumns={3}
    columnWrapperStyle={{ justifyContent: "space-between"}}
    contentContainerStyle={{
       marginTop:20 
    }}
    data={data}
    keyExtractor={item => item.id}
    renderItem={renderItemComponent}
/>

**问题：**需要像空格之间的方式，但如果有2个项目在行中，然后移动第二个项目到中间的基础上动态数据？

react-native

来源：https://stackoverflow.com/questions/58793811/flatlist-numcolumns-and-flex-justifycontent-issue

4条答案

按热度按时间

neekobn81#

您将不得不删除“columnWrapperStyle”

<FlatList
    numColumns={3}
    contentContainerStyle={{
       marginTop:20 
    }}
    data={data}
    keyExtractor={item => item.id}
    renderItem={renderItemComponent}
/>

示例链接：https://snack.expo.io/@msbot01/5aee23

赞(0）回复(0）举报 2023-06-06

zpjtge222#

假设numColumns = 3和renderItemComponent是一个组件。那么这就是让它像你想要的那样工作的解决方案

<FlatList
  numColumns={numColumns}
  contentContainerStyle={{
    marginTop: 20,
  }}
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={<renderItemComponent style={{ flex: 1 / numColumns }} />}
/>;

赞(0）回复(0）举报 2023-06-06

fnx2tebb3#

如果这对任何人都有帮助，在我的例子中，列表项容器上的{flex：1}样式就是原因。
给项目边框一个颜色使我确定list-item上的{flex：1}样式使项目平均占用可用空间（最后一行中的2个项目平均共享可用空间）。

删除子项样式上的{flex：1}样式属性后，该样式正确对齐，如下图所示。

赞(0）回复(0）举报 2023-06-06

ubof19bj4#

作为React Native 0.71，您现在可以这样做

<FlatList
numColumns={numColumns}
columnWrapperStyle={{ columnGap: 10 }}
contentContainerStyle={{
   marginTop:20 
}}
data={data}
keyExtractor={(item) => item.id}
renderItem={<renderItemComponent style={{ flex: 1 / numColumns }} />}/>

赞(0）回复(0）举报 2023-06-06

我来回答

React Native FlatList numColumns和flex justifyContent问题

4条答案

相关问题

热门标签

最新问答