陣營Android本地FlatList onScroll動畫

Question

我有一個onScroll功能看起來像這樣一個FlatList：

<Animated.View style={{ transform: [{translateX: this.state.scrollX}] }}> 
    <FlatList 
    data={ reactionGroup.reactions } 
    keyExtractor={ (i) => i.id + uuid.v4() } 
    renderItem={ this._renderItem } 
    horizontal={ true } 
    scrollEventThrottle={1} 
    onScroll={ reactionGroup.reactions.length > 1 ? this.onScroll : null } 
    showsHorizontalScrollIndicator={ false } /> 
</Animated.View> 

onScroll(event) { 
    const { timing } = Animated 
    if (event.nativeEvent.contentOffset.x > 0) { 
    timing(
     this.state.scrollX, 
     { toValue: -60, duration: 100, useNativeDriver: true } 
    ).start() 
    } else { 
    timing(
     this.state.scrollX, 
     { toValue: 0, duration: 100, useNativeDriver: true } 
    ).start() 
    } 
}, 

這適用於iOS很大，但Android的動畫將無法啓動，直到FlatList已經停止滾動。

我基本上只是開始動畫，當用戶滾動並設置回來時，他們回到水平滾動的開始。

有沒有更好的方式來處理這個問題，所以它在Android上工作？

我也試過在onScroll中做Animation.event，但我不想將動畫直接綁定到滾動位置。這種方法允許Android在滾動的同時進行動畫製作，但非常緊張。

RN：0.43.3

Answer 1

您應該使用Animated.event方法。如the docs中的示例所示，它會爲您映射event.nativeEvent。

下面是對如何通過RN貢獻者動畫上滾動的導航頭一個例子的博文：

https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a

希望它可以幫助:-)