Анимация 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

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

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

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

Edit: Стирание теперь поддерживается:

Android: 0.28 release notes

IOS: 0.26 release notes

Answer 2

Последние 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 
    } 
}; 

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

Затем крючок customLayoutLinear при установке компонента

LayoutAnimation.configureNext(CustomLayoutLinear);