如何通过ref为react-native-gifted-charts的ScrollView添加滚动监听并获取位置？

错误原因 #

你遇到的addEventListener is not a function错误，是因为scrollRef.current是React Native的ScrollView组件实例，而非浏览器DOM元素，RN组件不支持DOM的事件监听方法。

滚动监听解决方案 #

方案1：直接使用LineChart的onScroll属性（推荐）

react-native-gifted-charts的LineChart支持传递onScroll属性给内部ScrollView，直接传入你的监听函数即可，同时可通过event.nativeEvent.contentOffset.x获取横向滚动位置：

const onScroll = useCallback((event) => {
  const scrollX = event.nativeEvent.contentOffset.x;
  console.log("当前横向滚动位置：", scrollX);
  // 后续Y轴自适应逻辑写在这里
}, []);

return (
  <LineChart 
    scrollRef={scrollRef}
    onScroll={onScroll}
    scrollEnabled={true} // 确保开启横向滚动
  />
);

方案2：通过ref绑定滚动监听（不推荐，仅作补充）

如果必须通过ref实现，可利用RN组件实例的setNativeProps方法动态绑定事件，但这种写法不如props方式规范：

useEffect(() => {
  if (scrollRef.current) {
    scrollRef.current.setNativeProps({
      onScroll: onScroll
    });
  }
}, [onScroll]);

Y轴自动缩放实现逻辑 #

要让Y轴适配当前视图内数据的最大最小值，需根据滚动位置筛选可见数据，计算Y值范围后更新图表的yAxisMin和yAxisMax：

import { Dimensions } from 'react-native';
const chartWidth = Dimensions.get('window').width; // 获取图表容器宽度
const [yAxisRange, setYAxisRange] = useState({ min: 0, max: 100 });

const onScroll = useCallback((event) => {
  const scrollX = event.nativeEvent.contentOffset.x;
  // 假设每个X轴数据点在图表上占据的宽度为50px（根据你的配置调整）
  const startIdx = Math.floor(scrollX / 50);
  const endIdx = Math.floor((scrollX + chartWidth) / 50);
  
  // 筛选当前视图内的所有数据点（多线图需取所有线条的Y值）
  const visibleData = yourChartData.slice(startIdx, endIdx + 1);
  if (visibleData.length === 0) return;

  const allYValues = visibleData.flatMap(item => item.yValues); // item.yValues为单条线的Y值数组
  const minY = Math.min(...allYValues);
  const maxY = Math.max(...allYValues);

  // 增加10%的缓冲区间，避免Y轴频繁跳动
  setYAxisRange({
    min: minY - (maxY - minY) * 0.1,
    max: maxY + (maxY - minY) * 0.1
  });
}, [yourChartData]);

return (
  <LineChart 
    data={yourChartData}
    onScroll={onScroll}
    scrollEnabled={true}
    yAxisMin={yAxisRange.min}
    yAxisMax={yAxisRange.max}
    // 其他图表配置项
  />
);

内容的提问来源于stack exchange，提问作者jabu404