React Native Android FlatList onScroll Animation

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 方法。正如文档中的示例所示，它event.nativeEvent为您映射了。

这是一篇博客文章，其中包含 RN 贡献者如何为滚动时的导航标题设置动画的示例：

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

希望能帮助到你 ：-）