如何仅通过node handle检测React Native中ScrollView的高度变化？

1. 定时轮询结合UIManager测量 #

通过UIManager.measureNode定期获取ScrollView的布局信息，对比前后高度值判断是否变化。这种方式无需修改原组件，仅依赖node handle即可实现。

示例代码：

import { UIManager, findNodeHandle, useEffect, useRef } from 'react-native';

const ScrollHeightWatcher = ({ scrollViewRef }) => {
  const lastHeight = useRef(null);
  const timerRef = useRef(null);

  useEffect(() => {
    const nodeHandle = findNodeHandle(scrollViewRef.current);
    if (!nodeHandle) return;

    timerRef.current = setInterval(() => {
      UIManager.measureNode(nodeHandle, (x, y, width, height, pageX, pageY) => {
        if (height !== lastHeight.current) {
          lastHeight.current = height;
          // 触发内部元素重新测量的逻辑
          console.log('ScrollView高度变化');
        }
      });
    }, 100); // 可根据需求调整轮询间隔

    return () => {
      clearInterval(timerRef.current);
    };
  }, [scrollViewRef]);

  return null;
};

注意：轮询间隔不宜过短，避免影响性能；组件卸载时务必清除定时器，防止内存泄漏。

2. 监听父容器的onLayout事件 #

如果ScrollView的高度变化会导致其父容器布局调整（比如父容器高度随ScrollView自适应），可以给父容器添加onLayout回调，间接感知ScrollView的高度变化。

示例代码：

<View onLayout={() => {
  // 触发内部元素重新测量的逻辑
  console.log('ScrollView高度可能变化，触发重新测量');
}}>
  <ScrollView ref={scrollViewRef}>
    {/* 内部元素 */}
  </ScrollView>
</View>

这种方式无需轮询，性能更优，但依赖父容器布局与ScrollView高度的关联性。

3. 关联用户输入状态触发操作 #

既然ScrollView高度变化由用户输入导致，可直接监听用户输入的状态变化，在状态更新时触发内部元素的重新测量，无需直接监听ScrollView高度。

示例代码：

import { useState, useRef } from 'react';
import { ScrollView, TextInput } from 'react-native';

const App = () => {
  const [userInput, setUserInput] = useState('');
  const scrollViewRef = useRef(null);

  const handleInputChange = (text) => {
    setUserInput(text);
    // 用户输入变化，ScrollView高度大概率变化，触发重新测量
    triggerInnerElementMeasure();
  };

  const triggerInnerElementMeasure = () => {
    // 内部元素重新测量的逻辑
    console.log('触发内部元素重新测量');
  };

  return (
    <ScrollView ref={scrollViewRef}>
      <TextInput value={userInput} onChangeText={handleInputChange} />
      {/* 其他内部元素 */}
    </ScrollView>
  );
};

这种方式逻辑最直接，完全不需要依赖ScrollView的布局信息，适合输入驱动高度变化的场景。

4. 自定义Native监听模块 #

如果上述方案都不满足需求，可编写简单的跨端Native模块，通过node handle监听View的布局变化：

• iOS：利用KVO监听View的frame属性变化，或重写layoutSubviews方法
• Android：给View添加OnLayoutChangeListener
• Web：使用ResizeObserver（目前主流浏览器已支持）或MutationObserver监听元素尺寸变化

在Native层监听布局变化后，通过桥接回调通知JS端，实现高度变化的感知。这种方式兼容性好、性能稳定，但需要一定的Native开发能力。

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