在列之间反应本机FlatList分隔符 [英] React Native FlatList separator between columns

问题描述

我有一个包含多列的FlatList：

I have a FlatList with multiple columns:

    <FlatList
      numColumns={4}
      ItemSeparatorComponent={this.renderSeparator}
      ...
    </FlatList>

还有一个行分隔符：

  renderSeparator = () => (
    <View
      style={{
        backgroundColor: 'red',
        height: 0.5,
      }}
    />
  );

但是分隔符仅出现在行之间，而不出现在列之间（即使我添加宽度：0.5

But the separator only appear between rows, not between columns (even if i add width: 0.5

查看在博览会上

推荐答案

，您可以仅在renderItems中添加else条件并检查索引模数以添加分隔符。我只是用这个，一切都很好。

you can just add if else condition inside renderItems and check the index modulus to add separator.. I just use this one and everything works great.

类似：-

_renderItem = ({item,index}) => {
   return(
      <View style={[{ backgroundColor: 'red', flex: 1 }, index%2==0 ? { marginRight: 10 } : { marginLeft: 10 } ]}>
         <Text>{item.key}</Text>
      </View>
   )
}

希望这会对您有所帮助。

hope this will help you.

这篇关于在列之间反应本机FlatList分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！