Разделение элементов внутри списка - PullRequest
Новая
       15

Разделение элементов внутри списка

1 голос
/ 12 марта 2019

У меня есть список элементов внутри Flatlist, и я хочу разделить их точкой (‧), например:

Eg

У меня есть что-то вроде этого: (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

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 12 марта 2019

Использование ItemSeparatorComponent 

<FlatList
  data={data}
  horizontal
  renderItem={({ item }) => <Text>{item}</Text>}
  keyExtractor={(item, index) => index.toString()}
  ItemSeparatorComponent={() => <Text> ‧ </Text>}
/>
0 голосов
/ 12 марта 2019

renderItem prop имеет свойство под названием 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()}
/>
...