React Native中ScrollView的refScrollView.current为null如何获取？

你在组件渲染逻辑中直接打印refScrollView.current时，ScrollView组件还未完成挂载，ref还未被赋值，因此输出为null。另外函数组件中不推荐使用createRef，createRef每次组件重渲染都会生成新的ref对象，容易导致引用丢失，建议替换为useRef。

• 第一步：将createRef替换为useRef，保证ref引用在组件生命周期内唯一
• 第二步：在组件挂载完成后再访问ref，可通过空依赖的useEffect实现
• 第三步：如果需要获取滚动位置，优先使用ScrollView自带的onScroll回调，性能更优

import React, { useRef, useEffect } from 'react';
import { ScrollView, Text, View } from 'react-native';

const Test = () => {
  // 替换为useRef保证引用稳定
  const refScrollView = useRef(null);

  // 组件挂载完成后访问ref，此时current有值
  useEffect(() => {
    console.log('挂载完成后的ref：', refScrollView.current);
    // 手动调用ScrollView方法示例
    if (refScrollView.current) {
      refScrollView.current.scrollTo({ y: 100, animated: true });
    }
  }, []);

  // 滚动事件实时获取滚动位置示例
  const handleScroll = (e) => {
    const offsetY = e.nativeEvent.contentOffset.y;
    console.log('当前滚动位置Y轴偏移：', offsetY);
  };

  return (
    <ScrollView 
      ref={refScrollView}
      onScroll={handleScroll}
      scrollEventThrottle={16} // 控制滚动事件触发频率，16ms对应60帧刷新率
    >
      <View style={{height: 2000, padding: 20}}>
        <Text>测试滚动内容</Text>
      </View>
    </ScrollView>
  );
};

export default Test;

• 如果是在点击、滑动等用户交互事件中访问ref，只要组件已经挂载完成，直接访问refScrollView.current即可，不需要包在useEffect中
• 不需要实时监听滚动位置时，也可以在需要取值时主动调用refScrollView.current?.scrollToOffset相关方法获取当前偏移量

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