React Native中如何在HOC内获取子组件的布局尺寸属性？

RN中无法直接静态读取子元素最终生效的所有属性，因为布局会受flex规则、屏幕适配、动态样式影响，需要分场景用对应方法获取：

获取width、height等实际布局属性 #

这类属性是子元素渲染完成后真实占用的布局尺寸，通过布局监听或者节点测量方法拿，准确性最高：

• 用onLayout回调：子元素首次渲染、后续尺寸发生变化时都会触发这个回调，直接返回当前实际的宽高、相对父容器坐标
• 用measure方法：拿到子元素的原生节点ref后调用，可以拿到相对屏幕根节点的精确坐标，适合做绝对定位、浮层联动这类场景

对应实现代码：

import React, { useState, useRef } from 'react';
import { View } from 'react-native';
import styles from './Shadow.style';

const MyHOC = ({children}) => {
  const childRef = useRef(null);
  const [childLayout, setChildLayout] = useState({
    width: 0,
    height: 0,
    x: 0,
    y: 0
  });

  const handleChildLayout = (e) => {
    const { width, height, x, y } = e.nativeEvent.layout;
    setChildLayout({width, height, x, y});
    // 拿到宽高后直接做后续逻辑即可，比如给阴影层设置同尺寸
  };

  return (
    <View style={styles.hocContainer}>
      {/* 单节点场景用React.Children.only校验，多子节点直接遍历Children即可 */}
      {React.cloneElement(React.Children.only(children), {
        ref: childRef,
        onLayout: handleChildLayout
      })}
    </View>
  )
};

export default MyHOC;

获取borderRadius等样式属性 #

这类写在style规则里的属性，分两种情况处理：

• 子元素显式传入style的场景：直接从子元素props里拿到style属性，用StyleSheet.flatten打平数组、嵌套样式后读取即可

注意：这个方法只能拿到子元素props上显式绑定的样式，如果样式是通过主题、继承、父组件默认注入隐式生效的，静态读props拿不到，这种场景建议在组件约定层面要求子元素显式传对应属性，不建议走原生桥接拿最终渲染样式，性能损耗很高。

读取样式的代码片段：

import { StyleSheet } from 'react-native';

// 传入child节点即可拿到打平后的样式属性
const parseChildStyle = (child) => {
  const mergedStyle = StyleSheet.flatten(child.props.style || {});
  return {
    borderRadius: mergedStyle.borderRadius ?? 0,
    borderWidth: mergedStyle.borderWidth ?? 0,
    backgroundColor: mergedStyle.backgroundColor
  };
};

注意事项 #

• 如果包裹的是自定义函数组件，需要子组件通过React.forwardRef把ref透传到内部的原生宿主组件（View/Text等），否则ref拿不到原生节点，onLayout如果子组件没有做props透传也会失效
• onLayout拿到的是渲染完成后的实际物理像素对应值，和样式里写的逻辑像素可能因为屏幕缩放、flex自适应存在差异，所有布局相关的计算以这个返回值为准
• 如果需要监听后续布局变化（比如横竖屏切换、动态改样式导致尺寸变了），不需要额外加监听，onLayout会自动触发更新

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