React Native：如何将ComponentA的heightHeader状态变量传递给ComponentB？

在React（包括React Native）中，组件间状态遵循单向数据流原则，子组件无法直接获取另一个子组件的内部状态。要实现ComponentA的heightHeader传递给ComponentB，最直接的方案是将状态提升到两者的共同父组件中，通过父组件中转完成数据传递。

步骤1：修改ComponentA，添加回调传递高度值 #

让ComponentA接收一个回调props，当header高度确定后，调用该回调把高度值传递出去：

// ComponentA.js
import { useState, View } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const ComponentA = ({ onHeaderHeightChange }) => {
  const insets = useSafeAreaInsets();
  // 初始值改为0更合理，高度是数值类型
  const [heightHeader, setHeightHeader] = useState(0);

  return (
    <View 
      onLayout={({ nativeEvent }) => {
        const { height } = nativeEvent.layout;
        setHeightHeader(height);
        // 调用父组件传入的回调，同步高度值
        onHeaderHeightChange(height);
      }}
    >
      {/* ComponentA原有内容 */}
    </View>
  );
};

export default ComponentA;

步骤2：创建共同父组件，管理状态并分发 #

新建父组件（如ParentComponent.js），在这里声明heightHeader状态，传递给ComponentA用于更新，同时传递给ComponentB用于使用：

// ParentComponent.js
import { useState, View } from 'react';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const ParentComponent = () => {
  const [headerHeight, setHeaderHeight] = useState(0);

  return (
    <View style={{ flex: 1 }}>
      {/* 传递更新状态的回调给ComponentA */}
      <ComponentA onHeaderHeightChange={setHeaderHeight} />
      {/* 把高度值作为props传给ComponentB */}
      <ComponentB heightHeader={headerHeight} />
    </View>
  );
};

export default ParentComponent;

步骤3：修改ComponentB，接收并使用props #

让ComponentB接收heightHeader props，在样式中直接使用该值：

// ComponentB.js
import { View } from 'react';

const ComponentB = ({ heightHeader }) => {
  return (
    <View style={{ flex: 1 }}>
      <View style={{
        flex: 1,
        paddingTop: heightHeader,
      }}>
        {/* ComponentB原有内容 */}
      </View>
    </View>
  );
};

export default ComponentB;

补充说明 #

• 如果组件层级较深或多个组件需要使用该高度值，可以用React Context实现全局状态管理，避免多层props传递的繁琐。
• onLayout会在组件布局变化时触发（比如屏幕旋转），此时heightHeader会自动更新，ComponentB也会同步重新渲染，保证样式正确性。

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