Получить плоский список ItemSeparatorComponent конечный элемент? - PullRequest
Новая
       9

Получить плоский список ItemSeparatorComponent конечный элемент?

2 голосов
/ 27 марта 2020

Плоский список позволяет определить ItemSeparatorComponent , который получает в качестве реквизитов по умолчанию highlighted и leadingItem. Ведущий элемент представляет элемент, отображаемый перед разделителем.

Проблема заключается в том, что я использую inverted в моем плоском списке, и теперь мои разделители должны адаптироваться к следующему элементу вместо предыдущий.

Есть ли способ получить доступ к элементу, отображаемому после Разделителя? Что-то вроде висячего элемента?

1 Ответ

3 голосов
/ 01 апреля 2020

Если вы хотите получить конечный элемент, вы можете использовать separators.updateProps для добавления пользовательского свойства. Ниже я использовал пример из FlatList docs и немного его изменил. В этом примере мы выделяем завершающий разделитель элемента, по которому щелкнули, и добавляем trailingItem к подпоркам ItemSeparatorComponent.

Вывод:

Output

Код:

JSX: 

 <View style={styles.container}>
            <FlatList
  ItemSeparatorComponent={(props) => {
    console.log('props', props); // here you can access the trailingItem with props.trailingItem
    return (<View style={{height: 5, backgroundColor: props.highlighted ? 'green' : 'gray'}} />);
  }}
  data={data}
  inverted
  renderItem={({item, index, separators}) => renderItem(item,index,separators)}
 />
</View>

renderItem: 

  const renderItem = (item, index, separators) => {
    return (
       <TouchableHighlight
          key={item.key}
          onPress={() => console.log('onPress')}
          onShowUnderlay={() => separators.updateProps('trailing', {trailingItem: data[index+1], highlighted: true})}
          onHideUnderlay={() => separators.updateProps('trailing', {trailingItem: data[index+1], highlighted: false})}>
          <View style={{backgroundColor: 'white', height: 50, justifyContent: 'center', alignItems: 'center'}}>
            <Text>{item.id}</Text>
          </View>
        </TouchableHighlight>
    );
  }

Объяснение:

Вся магия c происходит здесь: 

onShowUnderlay={() => separators.updateProps('trailing', {trailingItem: data[index+1], highlighted: true})}

Из документов видно, что updateProps ожидает следующие два параметра:

выбор (enum ('ведущий', 'трейлинг'))

newProps (объект)

Сначала мы выбираем trailing, затем мы можем добавить наши обычай реквизит Мы добавляем trailingItem реквизит и переопределяем highlighted реквизит. Теперь мы можем получить доступ к нашим реквизитам в ItemSeparatorComponent с помощью props.trailingItem (см. Выше, я оставил комментарий к указанной строке c).

Рабочий пример:

https://snack.expo.io/@tim1717 / flatlist-separators

...