如何在Parent组件中获取flex布局Child组件的实际尺寸？

核心结论 #

采用flex布局的组件完全可以获取实际尺寸，结合forwardRef配合measure方法或onLayout事件就能实现需求。

具体实现步骤 #

1. 修正代码中的拼写错误

先指出你代码里的两处小问题，避免影响布局效果：

• flexdirection 应改为驼峰式的 flexDirection
• childSytle 拼写错误，应为 childStyle

2. 用forwardRef暴露Child内部View的引用

修改Child组件，通过forwardRef把内部View的原生视图引用传递给父组件：

import { forwardRef, FC, PropsWithChildren, View, StyleSheet } from 'react-native';

// 用forwardRef包裹Child组件，暴露内部View的ref
const Child = forwardRef<View, PropsWithChildren>((props, ref) => {
  return <View ref={ref} style={styles.childStyle} />;
});

3. 在Parent组件中获取尺寸

有两种常用方式获取Child的实际尺寸：

方式一：通过onLayout事件实时获取

直接在Child组件上绑定onLayout事件，布局变化时会自动返回尺寸信息：

import { LayoutChangeEvent } from 'react-native';

const Parent: FC<PropsWithChildren> = () => {
  const handleChildLayout = (event: LayoutChangeEvent) => {
    const { width, height } = event.nativeEvent.layout;
    console.log('Child实际尺寸：', width, height);
    // 可将尺寸存入状态供后续业务使用
  };

  return (
    <View style={styles.container}>
      <Child onLayout={handleChildLayout} />
    </View>
  );
};

方式二：通过ref调用measure方法

如果需要主动触发尺寸获取（比如某个操作后），可以用ref的measure方法：

import { useRef, useEffect } from 'react';

const Parent: FC<PropsWithChildren> = () => {
  const childRef = useRef<View>(null);

  useEffect(() => {
    // 组件挂载完成后调用measure，避免ref为空
    childRef.current?.measure((x, y, width, height, pageX, pageY) => {
      console.log('Child实际尺寸：', width, height);
      // 处理尺寸数据
    });
  }, []);

  return (
    <View style={styles.container}>
      <Child ref={childRef} />
    </View>
  );
};

补充说明 #

• onLayout会在组件首次渲染、布局发生变化（如屏幕旋转、父组件尺寸改变）时自动触发，适合实时监听尺寸变化
• measure方法需在组件挂载完成后调用，若需在动态场景下获取，可结合useEffect监听相关依赖项

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