React Native：从SwitchNavigator转用DrawerNavigator后如何传参？

我明白你遇到的困扰——之前用SwitchNavigator时直接通过navigate方法传参数的方式，在DrawerNavigator里好像不那么直接，不过其实有几种简单的实现方式，我给你梳理一下：

1. 跳转抽屉内页面时传递参数 #

其实DrawerNavigator里的子页面和SwitchNavigator里的页面传参逻辑是一致的，你只需要在调用navigate时带上params即可，和你之前的用法类似：

示例代码： #

从当前页面跳转到抽屉里的Home页面并传参：

this.props.navigation.navigate('Home', { 
  username: this.state.username 
});

然后在Home页面中获取参数：

// React Navigation 5+ 版本用 route.params
const { username } = this.props.route.params || {};

// 旧版本（React Navigation 4及以下）用 getParam
const username = this.props.navigation.getParam('username', '默认值');

2. 打开抽屉时向抽屉组件本身传参 #

如果你需要给抽屉侧边栏（比如自定义的抽屉内容组件）传递参数，可以在调用openDrawer时传入参数：

示例代码： #

打开抽屉并传递用户信息：

this.props.navigation.openDrawer({ 
  params: { username: this.state.username } 
});

在自定义的抽屉内容组件中获取参数：

function CustomDrawerContent(props) {
  // 获取传递的参数
  const { username } = props.route.params || {};

  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <Text>当前登录用户：{username}</Text>
    </DrawerContentScrollView>
  );
}

3. 全局状态共享（适合频繁使用的参数） #

如果像用户名这类参数需要在多个页面和抽屉中使用，更推荐用React Context或者状态管理工具（比如Redux）来共享状态，这样就不需要每次跳转都手动传参，直接在组件中获取全局状态即可。

小提示 #

你之前用SwitchNavigator的写法里带了key参数，在DrawerNavigator的navigate方法里其实不需要额外传key，只需要指定routeName和params就可以正常工作啦。

内容的提问来源于stack exchange，提问作者J. Doe