如何通过Ref获取React-Native中ScrollView的高度？

嘿，我完全懂你遇到的困扰——在React Web里直接通过DOM元素的ref拿height属性很顺手，但React Native的组件模型和Web不一样，ScrollView的ref指向的是原生视图的代理对象，根本没有height或者clientHeight这些Web端的属性，所以你之前的打印结果都是undefined很正常。

下面给你两种可行的方案，优先满足你不想用onLayout的需求：

方案一：使用ref的measure方法 #

React Native的视图组件都提供了measure方法，通过它可以获取到组件的实际渲染尺寸和位置。你需要确保在组件布局完成后调用这个方法，放在useEffect里是合适的：

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

function Component() {
  const scrollView = useRef(null);

  useEffect(() => {
    // 先确认ref已经绑定到ScrollView实例
    if (scrollView.current) {
      scrollView.current.measure((x, y, width, height, pageX, pageY) => {
        console.log("ScrollView的高度：", height);
        // 这里可以把height存到状态里或者做其他处理
      });
    }
  }, []); // 空依赖数组确保只在组件挂载后执行一次

  return (
    <ScrollView ref={scrollView}>
      <View style={{ height: 800, width: 100 }} />
    </ScrollView>
  );
}

不过要注意：如果组件刚挂载就调用measure，偶尔会遇到布局还没完全完成的情况，导致拿到的高度不准确。这时候可以给measure加个短暂的延迟，比如用setTimeout包裹一下：

setTimeout(() => {
  scrollView.current?.measure((x, y, width, height) => {
    console.log("ScrollView的高度：", height);
  });
}, 100);

方案二：官方推荐的onLayout方法（最稳定） #

如果measure方法偶尔出现拿不到正确值的情况，或者你需要实时监听ScrollView的高度变化（比如屏幕旋转、父组件尺寸改变时），那onLayout就是最稳妥的选择——虽然你不太想用，但它是React Native专门为获取布局尺寸设计的API：

import React, { useRef, useState } from "react";
import { View, ScrollView } from "react-native";

function Component() {
  const scrollView = useRef(null);
  const [scrollViewHeight, setScrollViewHeight] = useState(0);

  const handleLayout = (event) => {
    const { height } = event.nativeEvent.layout;
    setScrollViewHeight(height);
    console.log("ScrollView当前高度：", height);
  };

  return (
    <ScrollView ref={scrollView} onLayout={handleLayout}>
      <View style={{ height: 800, width: 100 }} />
    </ScrollView>
  );
}

onLayout会在组件首次渲染完成、以及每次布局发生变化时自动触发，回调里的event.nativeEvent.layout包含了组件的width、height、x、y等信息，能保证你拿到的是最新的尺寸。

总结 #

React Native没有Web端的DOM模型，所以不能直接通过ref获取height属性。优先试试measure方法，如果需要更高的可靠性或者实时监听尺寸变化，onLayout是不二之选。

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