React Native中如何将ComponentA的heightHeader传递给ComponentB？

方案一：状态提升（推荐，适合组件层级较浅的场景） #

将heightHeader的状态提升到ComponentA和ComponentB的共同父组件中，通过props传递状态更新函数和状态值。

1. 创建共同父组件（如ParentComponent.js）

import { useState } from 'react';
import { View } from 'react-native';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const ParentComponent = () => {
  // 初始值设为0更合理，避免数字类型和布尔类型混用导致样式异常
  const [heightHeader, setHeightHeader] = useState(0);

  return (
    <View style={{ flex: 1 }}>
      {/* 把状态更新函数传给ComponentA */}
      <ComponentA setHeightHeader={setHeightHeader} />
      {/* 把heightHeader作为props传给ComponentB */}
      <ComponentB heightHeader={heightHeader} />
    </View>
  );
};

export default ParentComponent;

2. 修改ComponentA.js，接收并调用状态更新函数

import { View, useSafeAreaInsets } from 'react-native';

const ComponentA = ({ setHeightHeader }) => {
  const insets = useSafeAreaInsets();

  return (
    <View 
      onLayout={({ nativeEvent }) => {
        const { height } = nativeEvent.layout;
        setHeightHeader(height);
      }}
    >
      {/* 这里放置ComponentA的内容 */}
    </View>
  );
};

export default ComponentA;

3. 修改ComponentB.js，接收heightHeader并应用到样式

import { View } from 'react-native';

const ComponentB = ({ heightHeader }) => {
  return (
    <View style={{ flex: 1 }}>
      <View style={{
        flex: 1,
        paddingTop: heightHeader,
      }}>
        {/* 这里放置ComponentB的内容 */}
      </View>
    </View>
  );
};

export default ComponentB;

方案二：React Context（适合组件层级较深的场景） #

如果ComponentA和ComponentB之间层级较多，不想逐层传递props，可以使用React Context来共享状态。

1. 创建Context文件（如HeaderHeightContext.js）

import { createContext, useContext, useState } from 'react';

const HeaderHeightContext = createContext();

// 提供状态的Provider组件
export const HeaderHeightProvider = ({ children }) => {
  const [heightHeader, setHeightHeader] = useState(0);

  return (
    <HeaderHeightContext.Provider value={{ heightHeader, setHeightHeader }}>
      {children}
    </HeaderHeightContext.Provider>
  );
};

// 自定义Hook，方便组件获取Context值
export const useHeaderHeight = () => useContext(HeaderHeightContext);

2. 修改ComponentA.js，使用Hook获取状态更新函数

import { View, useSafeAreaInsets } from 'react-native';
import { useHeaderHeight } from './HeaderHeightContext';

const ComponentA = () => {
  const insets = useSafeAreaInsets();
  const { setHeightHeader } = useHeaderHeight();

  return (
    <View 
      onLayout={({ nativeEvent }) => {
        const { height } = nativeEvent.layout;
        setHeightHeader(height);
      }}
    >
      {/* ComponentA内容 */}
    </View>
  );
};

export default ComponentA;

3. 修改ComponentB.js，使用Hook获取heightHeader

import { View } from 'react-native';
import { useHeaderHeight } from './HeaderHeightContext';

const ComponentB = () => {
  const { heightHeader } = useHeaderHeight();

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

export default ComponentB;

4. 在根组件或父组件中包裹Provider

import { HeaderHeightProvider } from './HeaderHeightContext';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const App = () => {
  return (
    <HeaderHeightProvider>
      <ComponentA />
      <ComponentB />
    </HeaderHeightProvider>
  );
};

export default App;

注意事项 #

• 初始状态建议设为0而非false，因为height是数字类型，避免样式计算时出现类型错误。
• onLayout事件会在组件布局变化时多次触发（比如屏幕旋转），此时状态会自动更新，ComponentB的样式也会同步调整，符合业务预期。

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