使用React Native動畫ListView行刪除動畫

使用LayoutAnimation動畫從ListView刪除一行的動畫有困難。使用React Native動畫ListView行刪除動畫

由於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) 
});

來源

2016-02-02 talkol

好像LayoutAnimation不支持刪除呢。

注意：LayoutAnimation適用於創建和更新佈局事件。刪除不支持。注意當圓圈被刪除時沒有動畫。

檢查：https://medium.com/@Jpoliachik/react-native-s-layoutanimation-is-awesome-4a4d317afd3e#.9cdaqazay

編輯： 刪除，現在支持：

的Android：0.28 release notes

的iOS：0.26 release notes

來源

2016-05-18 06:26:02 Swordsman

似乎現在這樣當鉤住customLayoutLinear！ https://github.com/facebook/react-native/pull/6779（但我還沒有能夠測試它呢..） – Tieme

刪除似乎被支持，但我似乎無法使其工作。任何人如何得到這個工作？ – AndiDev

最新的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 
    } 
};

只有創建或刪除將觸發不透明緩出入和出。更新組件，只需輕鬆一下，輕鬆一下。

安裝組件

LayoutAnimation.configureNext(CustomLayoutLinear);

來源

2017-09-19 07:11:28

使用React Native動畫ListView行刪除動畫

回答

相關問題