javascript - React Native 如何在同一个动画事件中传递两个事件？

Question

我有两个 Action 通过 setParams 传递

componentWillMount() {
                  this.props.navigation.setParams({
                    animatedValue: this._animatedValue.interpolate({
                    inputRange: [0, 800],
                    outputRange: [0, -70],
                    extrapolate: 'clamp'
                  }),
                  colorRange: this.x.interpolate({
                    inputRange: [0, 5,10,15,20,25,30,35,40,49,56],
                    outputRange: ['rgba(0, 0, 0,0)', 'rgba(255, 0, 0,0.1)', 'rgba(255, 0, 0,0.2)', 'rgba(255, 0, 0,0.3)', 'rgba(255, 0, 0,0.4)', 'rgba(255, 0, 0,0.5)', 'rgba(255, 0, 0,0.6)', 'rgba(255, 0, 0,0.7)', 'rgba(255, 0, 0,0.8)', 'rgba(255, 0, 0,0.9)' ,'rgba(255, 0, 0,1)'],
                    extrapolate: 'clamp'
                  })
                });
                }

并且在我只使用一个动画事件中。垂直滚动时如何使用这两个事件

<ScrollView onScroll={ Animated.event([{nativeEvent: {contentOffset: {y: this._animatedValue }}}] )} scrollEventThrottle={16} >

Answer 1

由于 Animated.event 接受您想要的任意多个参数，并且您将 nativeEvent 或自定义监听器传递给它，让我们试试这个:

<ScrollView onScroll={ Animated.event(
  [{nativeEvent: {contentOffset: {y: this._animatedValue }}}],
  { listener: this._customListener },
)} scrollEventThrottle={16}>

让你的听众喜欢:

_customListener(e) {
  // do whatever you want using this.colorRange
}