组件渲染时onLayout未触发，如何正确获取组件在父容器中的位置？

先修复代码语法错误 #

你提供的代码里存在解构赋值语法错误：const {width, height, x y} = event.nativeEvent.layout中，x和y之间缺少逗号，这会导致代码报错，直接阻止onLayout回调执行。修复后应为：

const { width, height, x, y } = event.nativeEvent.layout;

确保自定义组件转发onLayout属性 #

如果MyComponent是你自定义的组件，默认不会自动把onLayout属性传递给内部的原生容器组件（比如View、Text等）。需要在自定义组件内部，将onLayout转发给实际渲染的基础组件：

const MyComponent = ({ onLayout, ...restProps }) => {
  return <View onLayout={onLayout} {...restProps} />;
};

其他排查点 #

• 确认MyComponent是否被正常渲染：如果存在条件渲染逻辑（比如&&判断、三元表达式），要检查组件是否满足渲染条件，未挂载的组件不会触发onLayout。
• 强制触发重绘：如果组件已渲染但onLayout仍未执行，可以尝试修改组件的key或style属性，强制组件重新渲染，触发onLayout回调。

完整正确示例 #

// 自定义组件正确转发onLayout
const MyComponent = ({ onLayout, ...props }) => {
  return <View onLayout={onLayout} {...props} />;
};

// 使用组件的代码
<MyComponent
  key={index}
  onLayout={(event) => {
    const { width, height, x, y } = event.nativeEvent.layout;
    console.log('width', width);
    console.log('height', height);
    console.log('x', x);
    console.log('y', y);
  }}
/>

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