列之间的 React Native FlatList 分隔符

Question

我有一个包含多列的 FlatList：

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

和一个行分隔符：

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

但是分隔符只出现在行之间，而不是列之间（即使我添加 width: 0.5

看世博

原文由 Avery235 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

就像是 ：-

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

希望这会帮助你。

原文由 Hazim Ali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这将帮助您：

 <FlatList
      data={['1', '2', '3', '4', '5', '6', '7', '8']}
      numColumns={4}
      ItemSeparatorComponent={this.renderSeparator}
      renderItem={({ item ,index}) => (
        <>
        <Text style={styles.text}>{item}</Text>
        <View
                      style={{
                        backgroundColor:
                          index - 3 ? 'red': "transparent",
                        width: 0.5,
                      }}
                    ></View>
                    </>
      )}
    />

原文由 Sayan Dey 发布，翻译遵循 CC BY-SA 4.0 许可协议