如何添加 onscroll 事件侦听器并使用滚动视图的 ref 获取 Scrollview 的当前滚动位置

Question

我正在使用 react-native-gifted-charts 来实现具有多条线的面积图。

目标：允许用户水平滚动图表，但始终显示最小全范围值（垂直，y 轴）。即，当视图中的值具有较低范围（在最大值和最小值之间）时，根据需要自动放大和缩小，并且更多值不会进入视图框架。

机会：react-native-gifted-charts 为您提供了对其内部实现中使用的底层滚动视图的引用。

麻烦：我知道如何通过直接将

onscroll

道具作为道具附加到滚动视图来添加它，即

<Scrollview onscroll={(event) => {}} />

我将能够以这种方式实现我需要实现的一切，但我不知道如何使用对 Scrollview 的引用来实现这一点

我被困在这里了：

const scrollRef = useRef(null)

  const onScroll = useCallback((event) => {
    console.log("🚀 ~ file: EnergyGraph.tsx:1149 ~ onScroll ~ event:", event.target)
    // my logic would go here
  }, [])

  useEffect(() => {
    if (scrollRef?.current) {
      scrollRef.current.addEventListener("scroll", onScroll)
      return () => scrollRef.current.removeEventListener("scroll", onScroll)
    }
  }, [])

  return (
      <LineChart scrollRef={scrollRef} />
)...

但是使用这种方法，我收到错误：addEventListener 不是函数

Answer 1

我认为你必须通过添加

extraScroll

道具来编辑这个库，称它位于此处
https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/blob/3ac786c691cb2da6bbb6b280ab62229d6b559179/src/LineChart/index.tsx#L2694-L2704

像这样：

onScroll: (ev: any) => {
      if (
        pointerConfig &&
        pointerConfig.activatePointersOnLongPress &&
        pointerConfig.autoAdjustPointerLabelPosition
      ) {
        setScrollX(ev.nativeEvent.contentOffset.x);
      }
      props.extraScroll && props.extraScroll(ev)
    },

之后你可以使用这个道具

extraScroll

在你的班级中处理更多事情