ScrollView React Native 上的多个 onScroll 事件？

Posted 2023-03-15

【中文标题】ScrollView React Native 上的多个 onScroll 事件？

【英文标题】：Multiple onScroll Events on ScrollView React Native?

【发布时间】：2017-06-02 19:06:21

【问题描述】：

React Native 的 ScrollView 中是否可以有多个 onScroll 事件？

我遇到的问题是我有一个像这样呈现ListView 的组件：

<ListView
      onScroll=Animated.event(
        [nativeEvent: contentOffset: y: this.state.scrollY],
        onScroll: this.props.onScroll
      )
      scrollEventThrottle=10
      dataSource=stuff
      removeClippedSubviews=false
      renderSeparator=this.makeSeparator
      renderRow=this.makeStuff
      enableEmptySections=true
    />

正如您所见，已经有一个 Animaion 事件订阅了它，但我也希望能够传递 this.props.onScroll，以防我想要渲染该事件的更高组件的不同滚动功能。

这可能吗？有什么想法吗？

【参考方案1】：

如果您使用的是“useNativeDriver”：

onScroll = Animated.event(
        [nativeEvent: contentOffset: x: this.xOffset],
        
            listener: (event)=>
                //do something here like Keyboard.dismiss() or this.props.onScroll(event)
            ,
            useNativeDriver: true
        
    );

【讨论】：

这对我有用，即使不使用“useNativeDriver”

【参考方案2】：

如果您想组合事件，我只需将Animated.event 带入它自己的方法中。所以

<ListView
      onScroll=this.onScroll.bind(this)
      ...
      />

onScroll(event) 
    if(this.props.onScroll) this.props.onScroll(event)
    Animated.event(
        [nativeEvent: contentOffset: y: this.state.scrollY],
        onScroll: this.props.onScroll
    )(event)