React Native Android FlatList onScroll动画

Question

我有一个FlatList，其中包含一个onScroll函数，代码如下：

<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

- Zach

Answer 1

你应该使用Animated.event方法。如文档中所示，它会为你映射event.nativeEvent。

这是一篇RN贡献者的博客文章，其中提供了一个例子，演示如何在滚动时通过动画使导航栏变化： https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a 希望这能有所帮助 :-)

- jhm