Animated.Event在React Native中如何工作？

Question

我理解正确吗？这两套代码的意思是否相同？在性能或可靠性上有什么区别吗？

<ScrollView
 onScroll={Animated.event(
  [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
)}
>
</ScrollView>

和

handleScroll(e){
  this.setState({ scrollY : e.nativeEvent.contentOffset.y });
}

<ScrollView
 onScroll={(e) => this.handleScroll(e)}
>
</ScrollView>

谢谢

Answer 1

如果你想处理滚动，你可以这样使用它：

handleScroll = (event) => {
    //custom actions
}

<ScrollView
 onScroll={Animated.event(
[{ nativeEvent: {
    contentOffset: {
      x: this.state.scrollY
     }
  }
}],{
   listener: event => {
       this.handleScroll(event);
   }})
}>
</ScrollView>

Answer 2

这是不一样的。 Animated.event用于将滚动、平移或其他事件等手势直接映射到动画值。所以在你的第一个例子中this.state.scrollY是一个Animated.Value. 你可能在某处有初始化它的代码，也许你的构造函数看起来像这样：

constructor(props) {
  super(props);
  this.state = {
    scrollY: new Animated.Value(0)
  };
}

在您的第二个示例this.state.scrollY中，是在滚动事件中触发的 y 值（只是数字），但与动画完全无关。所以你不能像Animated.Value在动画中那样使用那个值。

它在文档中解释here

Answer 3

根据这个源代码 Animated.event遍历作为它的参数传递的对象，直到找到 AnimatedValue 的实例。

然后将此键（已找到 AnimatedValue 的位置）应用于回调 (onScroll)，并将传递给滚动的事件键处的值分配给此 AnimatedValue。

在代码中：

const animatedValue = useRef(new Animated.Value(0)).current;
...
onScroll={Animated.event(
  [{nativeEvent: {contentOffset: {y: animatedValue}}}]
)}

是相同的

const animatedValue = useRef(new Animated.Value(0)).current;
...
onScroll={({nativeEvent: { contentOffset: {y} }}) => {
  animatedValue.setValue(y);
}}

如果您的回调接受多个事件（参数），那么只需将映射对象放在所需的索引处（因此数组作为 Animated.value 的参数。

onScroll={Animated.event(
  [
     {}, // <- disregard first argument of the event callback
     {nativeEvent: {contentOffset: {y: animatedValue}}} // <- apply mapping to the second 
  ]
)}