React Navigation切换不同标签页时调用navigate无法传递参数求助

• 自定义handleTabPress方法逻辑冲突：调用navigation.navigate传递参数后立刻执行navigation.popToTop()，会清空路由栈中携带的参数，导致目标页面接收不到参数
• Profile标签嵌套了两层StackNavigator（ProfileStack → MainProfileStack），传递的参数默认只会给到最外层的ProfileStack，不会自动透传到内层MainProfileStack的Profile页面
• 重复配置的resetOnBlur: true会在标签失去焦点时清空栈内参数，也会导致参数传递失效

1. 修正tabBarOnPress逻辑 #

删除多余的重复跳转逻辑，保留默认处理能力，避免覆盖参数传递链路：

const handleTabPress = ({ navigation, defaultHandler }) => {
  // 调用默认处理逻辑，保留原生参数传递能力
  defaultHandler();
  // 若需要每次点击标签回到栈顶，可保留该行，不会影响跳转时携带的参数
  navigation.popToTop();
};

2. 跨标签跳转时指定嵌套路由路径 #

跳转时明确标注参数需要传递到的内层路由，写法如下：

navigation.navigate('Profile', {
  screen: 'ProfileMain',
  params: {
    screen: 'Profile',
    params: {
      // 此处填写实际需要传递的业务参数
      userId: 123,
      userName: 'test'
    }
  }
})

3. 删除冗余的resetOnBlur配置 #

移除Tab配置中Profile项、MainProfileStack配置中两处的resetOnBlur: true配置，避免参数被意外清空。

在Profile页面中可通过以下方式打印参数确认传递结果：

// 函数组件写法
import { useRoute } from '@react-navigation/native';

const Profile = () => {
  const route = useRoute();
  console.log('接收的参数：', route.params);
  // 后续业务逻辑
}

// Class组件写法
class Profile extends React.Component {
  componentDidMount() {
    console.log('接收的参数：', this.props.route.params);
  }
}

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