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

根据this source code 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 
  ]
)}

Answer 2

它不一样。 coordinate c; // Setup options. po::options_description desc("Options"); desc.add_options() ("instruments.prop", po::value<coordinate>( &c )->multitoken(), "plugin names" );用于将滚动，平移或其他事件等手势直接映射到动画值。因此，在您的第一个示例中Animated.event是this.state.scrollY。你可能会在某处初始化它的代码，也许你的构造函数看起来像这样：

Animated.Value

第二个示例中的

constructor(props) { super(props); this.state = { scrollY: new Animated.Value(0) }; }是在滚动事件中触发的y值（只是数字），但与动画完全无关。因此您无法使用该值，因为您可以在动画中使用this.state.scrollY。

it's explained here in the documentation

Answer 3

是的，语义

存在差异

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

第一个，即上面的Animated.event返回一个函数，它将scrollview的nativeEvent.contentOffset.y设置为我假设为动画的当前scrollY状态。

其他代码只是将scrollY设置为您的scrollView的e.nativeEvent.contentOffset.y并导致重新呈现您的组件

Answer 4

如果要处理滚动，可以按以下方式使用它：

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

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

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

4 个答案: