React Native Android FlatList onScroll 动画答案

【问题标题】：React Native Android FlatList onScroll AnimationReact Native Android FlatList onScroll 动画
【发布时间】：2017-04-20 15:40:49
【问题描述】：

我有一个带有 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

【问题讨论】：

标签： javascript android react-native

【解决方案1】：

您应该使用 Animated.event 方法。如the docs 中的示例所示，它为您映射event.nativeEvent。

这是一篇博文，其中包含一个示例，说明如何通过 RN 贡献者在滚动时为导航标题设置动画：

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

希望对你有帮助:-)

【讨论】：