React Native元素测量值异常，求助正确获取元素尺寸方法

看起来你遇到的核心问题是设置了position: 'absolute'的Text元素，通过onLayout无法获取到预期的测量尺寸，这其实是绝对定位元素脱离正常布局流导致的布局计算问题，我给你两个针对性的解决方案：

原因分析 #

当Text设置position: 'absolute'后，它会脱离父容器textWrapper的正常布局流，而textWrapper本身没有设置明确的宽高和定位上下文（position: relative），这就导致onLayout事件捕获到的可能是父容器的尺寸（而非Text自身的实际尺寸），或者因为布局计算优先级的问题，Text的真实尺寸没有被正确同步到onLayout的回调中。

方案一：移除绝对定位（推荐，最简单） #

如果你的布局不需要Text绝对定位，直接去掉position: 'absolute'，让Text回到正常布局流中，这样onLayout就能准确捕获它的实际宽高：

// 修改后的样式
const styles = StyleSheet.create({
  top: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  textWrapper: {
    justifyContent: "center",
  },
  text: {
    // 移除position: 'absolute'
    fontSize: 60
  }
});

此时onLayout的回调就能拿到Text的真实布局数据，日志打印的结果会符合你的预期。

方案二：保留绝对定位的情况下修复测量 #

如果你必须保留position: 'absolute'，可以通过两个调整来解决：

1. 给父容器textWrapper添加position: 'relative'，让Text的绝对定位相对于这个容器建立上下文；
2. 使用Text的measure()方法手动测量（配合ref），确保获取到真实尺寸。

具体代码示例：

class YourComponent extends React.Component {
  // 创建Text的ref
  textRef = React.createRef();

  componentDidMount() {
    // 组件挂载完成后手动测量Text
    this.textRef.current?.measure((x, y, width, height, pageX, pageY) => {
      console.log("Text实际尺寸：width=", width, "height=", height);
      // 把测量结果赋值给this.layout
      this.layout = { width, height, x, y, pageX, pageY };
    });
  }

  render() {
    return (
      <View style={styles.top}>
        <Animated.View style={[styles.textWrapper, { position: 'relative' }]}>
          <Text
            ref={this.textRef}
            onLayout={(event) => {
              const layout = event.nativeEvent.layout;
              console.log("onLayout布局数据：", layout);
              this.layout = layout;
            }}
            style={[styles.text]}
          >
            Hola
          </Text>
        </Animated.View>
      </View>
    );
  }
}

// 修改后的样式
const styles = StyleSheet.create({
  top: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  textWrapper: {
    justifyContent: "center",
    // 添加relative定位，作为绝对定位的上下文
    position: 'relative',
  },
  text: {
    position: 'absolute',
    fontSize: 60
  }
});

这样调整后，无论是onLayout还是手动measure，都能获取到Text的真实测量值了。

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