Анимация удаления строк ListView с помощью React Native LayoutAnimation

Question

У меня возникают проблемы с анимацией удаления строки из ListView с помощью LayoutAnimation.

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

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

let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var movies = [movie1, movie2, movie3, movie4, movie5];

...

renderRow(row) {
  return <MovieRow key={row.movieId} />
}

...

// immutable delete of element in reducer (redux)
movies = movies.slice(0, 2).concat(movies.slice(3));

...

LayoutAnimation.spring();
this.setState({
  dataSource: ds.cloneWithRows(movies)
});

Answer 1

Последний react-native уже поддерживает анимацию при удалении. Я сделал что-то вроде:

const CustomLayoutLinear = {
  duration: 300,
  create: {
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity
  },
  update: {
    type: LayoutAnimation.Types.easeInEaseOut
  },
  delete: {
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity
  }
};

Только создание или удаление приведут к уменьшению и уменьшению прозрачности. Обновите компонент, просто сделайте easyIn и облегчите работу.

Затем подключите customLayoutLinear при монтаже компонента

  LayoutAnimation.configureNext(CustomLayoutLinear);

Answer 2

Похоже, LayoutAnimation еще не поддерживает удаление.

Примечание. LayoutAnimation работает с событиями создания и обновления макета. Удаление пока не поддерживается. Обратите внимание, что при удалении кругов анимация отсутствует.

Проверьте это: https://medium.com/@Jpoliachik/react-native-s-layoutanimation-is-awesome-4a4d317afd3e

Редактировать: удаление теперь поддерживается:

Android: 0.28 заметки о выпуске

iOS: заметки о выпуске 0.26