React Native中如何从Stack导航栏右侧组件向嵌套导航屏幕传值

针对你的嵌套导航层级（Bottom Navigator → Stack Navigator → Material Top Tabs Navigator → Home Screen），以下是几种能将Stack导航headerRight的点击状态传递给HomeScreen的具体方案：

方案一：React Context 跨层级传值（推荐） #

这种方式不受导航层级限制，直接通过Context共享状态，是最直观的跨组件传值方式。

1. 创建Context文件 #

新建一个HeaderContext.js：

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

const HeaderContext = createContext();

export const HeaderProvider = ({ children }) => {
  const [isHeaderRightClicked, setIsHeaderRightClicked] = useState(false);

  return (
    <HeaderContext.Provider value={{ isHeaderRightClicked, setIsHeaderRightClicked }}>
      {children}
    </HeaderContext.Provider>
  );
};

export const useHeaderContext = () => useContext(HeaderContext);

2. 在Stack导航组件中包裹Provider #

修改你的HomeDashboardNavigation，用HeaderProvider包裹导航器：

import { HeaderProvider, useHeaderContext } from './HeaderContext';

export default HomeDashboardNavigation = ({ route, navigation }) => {
  return (
    <HeaderProvider>
      <DashboardStack.Navigator>
        <DashboardStack.Screen 
          name="TopTabNavigator" 
          component={TopTabNavigator}    
          options={() => ({
            headerShown: true, 
            headerShadowVisible: false, 
            headerStyle:{backgroundColor:'#FEF8F0'},  
            headerTitle: (props) => <LogoTitle {...props} />, 
            headerTitleAlign: 'center',
            headerRight: () => {
              const { setIsHeaderRightClicked } = useHeaderContext();
              return (
                <TouchableOpacity onPress={() => {
                  setIsHeaderRightClicked(prev => !prev);
                }}>
                  <HintComponent />
                </TouchableOpacity>
              );
            },
          })}
        />
      </DashboardStack.Navigator>
    </HeaderProvider>
  )
}

3. 在HomeScreen中消费Context #

修改HomeScreen直接获取Context中的状态：

import { useHeaderContext } from './HeaderContext';
import { useEffect } from 'react';

const HomeScreen = (props) => {
  const { isHeaderRightClicked } = useHeaderContext();

  useEffect(() => {
    if (isHeaderRightClicked) {
      // 执行点击后的业务逻辑
      console.log('Header右侧按钮已点击');
    }
  }, [isHeaderRightClicked]);

  return (
    <ScrollView>
      {/* 页面内容 */}
    </ScrollView>
  );
}

方案二：导航参数 + useFocusEffect 监听 #

如果不想用Context，可以利用React Navigation的导航参数结合useFocusEffect（普通useEffect不会在Tab切换后重新执行，而useFocusEffect会在屏幕聚焦时触发）。

1. 在Stack的headerRight中更新TopTabNavigator的参数 #

修改HomeDashboardNavigation的headerRight点击事件：

export default HomeDashboardNavigation = ({ route, navigation }) => {
  return (
    <DashboardStack.Navigator>
      <DashboardStack.Screen 
        name="TopTabNavigator" 
        component={TopTabNavigator}    
        options={({ navigation, route }) => ({
          headerShown: true, 
          headerShadowVisible: false, 
          headerStyle:{backgroundColor:'#FEF8F0'},  
          headerTitle: (props) => <LogoTitle {...props} />, 
          headerTitleAlign: 'center',
          headerRight: () => (
            <TouchableOpacity onPress={() => {
              navigation.setParams({
                isHeaderClicked: !route.params?.isHeaderClicked
              });
            }}>
              <HintComponent />
            </TouchableOpacity>
          ),
        })}
        initialParams={{ isHeaderClicked: false }}
      />
    </DashboardStack.Navigator>
  )
}

2. 在TopTabNavigator中传递参数给HomeScreen #

修改TopTabNavigator，将上层参数传递给HomeScreen：

const TopTabNavigator = ({ route, navigation }) => {
  return (
    <Tab.Navigator tabBar={props => <TabBar {...props} />}>
      <Tab.Screen 
        name="HomeScreen" 
        component={HomeScreen} 
        initialParams={{ isHeaderClicked: route.params?.isHeaderClicked }}
        listeners={{
          tabPress: () => {
            navigation.getParent()?.setParams({
              isHeaderClicked: route.params?.isHeaderClicked
            });
          }
        }}
      />
      <Tab.Screen name="Second" component={SecondScreen} />
      <Tab.Screen name="Third" component={ThirdScreen} />
      <Tab.Screen name="Fourth" component={FourthScreen} />
    </Tab.Navigator>
  )
}

3. 在HomeScreen中用useFocusEffect监听参数变化 #

修改HomeScreen：

import { useFocusEffect } from '@react-navigation/native';
import { useCallback, useState } from 'react';

const HomeScreen = ({ route }) => {
  const [isHeaderRightClicked, setIsHeaderRightClicked] = useState(false);

  useFocusEffect(
    useCallback(() => {
      const latestStatus = route.params?.isHeaderClicked || false;
      setIsHeaderRightClicked(latestStatus);
      if (latestStatus) {
        console.log('Header右侧按钮已点击');
      }
    }, [route.params])
  );

  return (
    <ScrollView>
      {/* 页面内容 */}
    </ScrollView>
  );
}

方案三：全局状态管理（Redux/MobX） #

如果你的项目已经使用全局状态管理库，可直接将点击状态存入全局store，HomeScreen从store中获取状态即可，适合多组件共享该状态的场景。

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