如何在保留Stack Navigation的同时通过Drawer Navigation传递属性？

安全阿岳

2026-5-14

嘿，这个问题我之前也踩过坑！核心原因很简单：当你把Screen2包裹在自己的Stack Navigator里时，Drawer导航传递的参数其实是传到了这个Stack Navigator的容器组件上，而不是直接落到Screen2上。下面给你几个实用的解决办法，既能保留Stack导航，又能顺利拿到参数：

方法1：通过Stack Navigator的`initialParams`传递参数

你可以在定义Stack Navigator的时候，把容器收到的参数转递给子页面Screen2。修改你的Stack配置代码即可：

const CollapsScr = createStackNavigator({
  Collaps: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      // 把Stack容器从Drawer拿到的参数，通过initialParams传给Screen2
      initialParams: {
        user: navigation.getParam('user', null)
      }
    })
  }
});

这样一来，Screen2里原来的代码const userName = navigation.getParam('user', null)就能正常拿到参数了——因为Stack导航已经把参数转递给它了。

方法2：在Screen2中直接获取父导航的参数

如果不想改动Stack的配置，也可以在Screen2里直接向上找到Drawer导航的实例，从中取参数：

// 在Screen2的组件内部
const { navigation } = this.props;
// 获取Drawer导航的父实例
const drawerNav = navigation.getParent();
// 从Drawer导航里取出传递的参数
const userName = drawerNav.getParam('user', null);

这个方法更直接，适合快速调试或者不想修改Stack配置的场景。