阵营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

希望它可以帮助:-)