Как анимировать элементы плоского списка RN, когда и когда они входят / выходят из экрана / основного вида? - PullRequest
Новая
       3

Как анимировать элементы плоского списка RN, когда и когда они входят / выходят из экрана / основного вида?

0 голосов
/ 24 апреля 2019

Мне нужно анимировать плоские элементы, когда я прокручиваю их вверх или вниз.Обе анимации должны быть разными ( перевернуть вправо для нового элемента, входящего снизу / перевернуть влево для предыдущего элемента, достигнутого прокруткой вверх ).

В настоящее время по этому пути я могу получить элементы, которые в данный момент отображаются, используя реквизиты onViewableItemsChanged и viewabilityConfig в Flatlist.Я также могу анимировать сразу все элементы списка, но не могу добиться анимации для элемента, когда он становится видимым.

Что я пробовал:

Я передаю список видимых элементовчто я использую вышеуказанную функцию для элемента в качестве реквизита. 

<FlatList
      data={this.state.items}
      keyExtractor={item => item.id.toString()}
      renderItem={({ item, index }) => <Item values={item} viewable={this.state.viewable} ind={index} />}
      onViewableItemsChanged={this.handleViewableItemsChanged}
      viewabilityConfig={this.viewabilityConfig}
    />

Затем в элементе componentDidMount я пытаюсь определить, отображается ли отображаемый элемент и добавляет анимацию: 

var apply = this.props.viewable.filter(ele => ele.key == this.props.ind).length > 0;
this.setState({ shouldAnimate: apply });

Это не работает для того, что я пытаюсь сделать.

...