React Navigation：Header中使用navigation.navigate传参失败求助

嘿，我来帮你搞定这个问题～首先可以明确告诉你：完全不需要用Redux，你的思路本身没问题，只是写法上有几个小错误，还有跨栈传参的特殊处理需要注意。

先纠正你当前写法的问题 #

你写的 headerRight: (navigation.navigate('Lab', navigation.state.params} />) 存在两个关键问题：

1. 语法错误：headerRight需要返回一个可交互的React组件（比如按钮），而你直接调用了navigation.navigate——这会导致在渲染Header的时候就执行跳转，而不是用户点击时才触发。
2. navigation对象的获取方式不对：在页面的navigationOptions里，headerRight的回调函数会接收包含navigation的参数，你需要正确解构它。

正确的写法应该是这样（以类组件为例）：

static navigationOptions = ({ navigation }) => ({
  headerRight: () => (
    <TouchableOpacity 
      style={{ marginRight: 16 }}
      onPress={() => {
        // 先获取当前页面的参数，做个空值处理避免报错
        const currentPageParams = navigation.state.params || {};
        // 在点击事件里调用navigate，传递参数
        navigation.navigate('Lab', currentPageParams);
      }}
    >
      <Text>跳转至Lab</Text>
    </TouchableOpacity>
  ),
});

如果是函数组件，用useNavigation和useLayoutEffect来设置headerRight：

import { useNavigation } from '@react-navigation/native';
import { TouchableOpacity, Text } from 'react-native';

const YourScreen = () => {
  const navigation = useNavigation();

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity onPress={() => {
          const currentParams = navigation.getState().params || {};
          navigation.navigate('Lab', currentParams);
        }}>
          <Text>去Lab页面</Text>
        </TouchableOpacity>
      ),
    });
  }, [navigation]);

  // ... 页面其他逻辑
};

跨栈传参的特殊处理 #

你提到跨栈传参也失效，这是因为跨栈跳转时需要明确指定目标页面所在的栈，以及对应的screen名称。假设你的Lab页面在一个名为LabStack的导航栈里，正确的传参写法应该是：

onPress={() => {
  const currentParams = navigation.state.params || {};
  navigation.navigate('LabStack', {
    screen: 'Lab',
    params: currentParams,
  });
}}

额外的小建议 #

• 尽量用navigation.getParam('参数名', 默认值)来获取参数，比直接访问navigation.state.params.参数名更安全，避免参数不存在时抛出错误。比如在Lab页面里：

  const viewState = this.props.navigation.getParam('viewState', {});
  

• 确认目标页面（Lab）确实在导航配置里正确注册，参数名称和传递的一致。

这样调整后，不管是Header组件里的传参，还是跨栈传参，都应该能正常工作啦～

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