分隔列表中的项目

Question

我在 Flatlist 中有一个项目列表，我想用点 (‧) 分隔它们，如下所示：

我有这样的东西：(snack.expo.io/@abranhe/flatlist-separator)

<FlatList
  data={[ 'foo', 'bar', 'hello', 'word' ]}
  renderItem={({ item }) => <Text>{item} ‧ </Text>}
  horizontal={true}
  keyExtractor={(item, index) => index.toString()}
/>

很遗憾，它会在项目末尾加一个额外的点(‧)。

foo ‧ bar ‧ hello ‧ world ‧

有没有一种简单的方法可以从列表中删除最后一个分隔符？

foo ‧ bar ‧ hello ‧ world

提前致谢！

Answer 1

renderItem 属性有一个名为 index 的属性，它告诉您当前渲染项的索引。您可以检查它是否是最后一项。

例子

<FlatList
  data={this.state.someData}
  renderItem={({ item, index }) => (
    <Text>{(index !== (this.state.someData.length -1) ? `${item} -` : item)} </Text>
  )}
  horizontal={true}
  keyExtractor={(item, index) => index.toString()}
/>

Answer 2

使用ItemSeparatorComponent

<FlatList
  data={data}
  horizontal
  renderItem={({ item }) => <Text>{item}</Text>}
  keyExtractor={(item, index) => index.toString()}
  ItemSeparatorComponent={() => <Text> ‧ </Text>}
/>

分隔列表中的项目

Separating items inside a list

javascript

css

react-native

react-native-flatlist