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

希望它有所帮助： - ）

React Native Android FlatList onScroll Animation

1 个答案: