Stack Navigator报错：undefined is not an object(evaluating 'this.props.navigation.state.params.username')

嘿，我太懂你这种混合多种导航后遇到跳转报错的糟心感了！结合你给出的代码片段和导航结构描述，咱们来一步步排查解决：

先确认导航嵌套层级是否正确 #

首先得确保你的导航嵌套逻辑是合理的，通常推荐的结构是Drawer作为最外层，内部嵌套Stack导航，Stack里再嵌套Tab导航，这样跳转逻辑会更清晰。比如正确的配置应该是这样的：

// 1. 定义Tab导航
const TabNav = TabNavigator({
  Random: { screen: HomeScreen },
  Recent: { screen: RecentScreen },
  Trending: { screen: TrendingScreen },
  // 补充你的其他Tab页面
});

// 2. 定义Stack导航，将TabNav作为其中一个页面
const AppStackNav = StackNavigator({
  TabContainer: { screen: TabNav },
  OtherUserPage: { screen: OtherUserScreen }, // 这是你要跳转的用户详情页
  // 补充其他Stack页面
});

// 3. 最外层是Drawer导航
const RootDrawer = DrawerNavigator({
  MainApp: { screen: AppStackNav },
  // 补充Drawer的其他菜单项
});

如果你的层级反过来（比如Tab嵌套Drawer），那navigate调用肯定会找不到正确的目标栈。

修正跨栈跳转的代码写法 #

你尝试传入父导航的思路是对的，但跨栈跳转需要明确指定目标页面，而不是只跳转到父栈本身。把你的跳转代码改成这样：

otherUser(username) {
  this.props.navigation.navigate('AppStackNav', {
    screen: 'OtherUserPage', // 这里写你要跳转到的具体页面名称
    params: { username: username }
  });
}

这种写法是React Navigation中跨嵌套导航跳转的标准方式：先指定父导航栈的名称，再用screen指定栈内的目标页面，params传递需要的参数。

确保组件能拿到正确的navigation props #

如果你的组件是嵌套在Tab/Stack深层的自定义组件，可能会出现拿不到navigation props的情况。这时候可以用withNavigation高阶组件包裹你的组件，强制注入导航对象：

import { withNavigation } from 'react-navigation';

class YourComponent extends React.Component {
  // ...你的其他代码
  otherUser(username) {
    this.props.navigation.navigate('AppStackNav', {
      screen: 'OtherUserPage',
      params: { username: username }
    });
  }
}

export default withNavigation(YourComponent);

最后排查具体报错信息 #

如果还是没解决，一定要看具体的错误提示：

• 如果提示could not find route 'AppStackNav'：检查导航名称是否拼写错误，或者该导航栈是否在当前可访问的层级里；
• 如果提示参数未传递到目标页面：检查params的结构是否正确，目标页面是否通过this.props.navigation.getParam('username', '默认值')来获取参数。

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