react-navigation SwitchNavigator 参数传递异常：认证流程中无法获取props

嘿，我之前在配置react-navigation认证流程的时候也踩过这个坑！你的问题大概率出在这几个地方，我给你捋捋：

1. 先确认react-navigation版本，可能是参数获取方式错了 #

不同版本的react-navigation获取参数的API完全不一样：

• 如果是v4及更早版本：用this.props.navigation.state.params是正确写法，但如果是v5+版本，就得换成this.props.route.params了！
  类组件里可以这么写：

  class AppScreen extends React.Component {
    render() {
      // 加个|| {}避免参数为空时报错
      const { user } = this.props.route.params || {};
      console.log(user); // 试试这个，应该能拿到"hello"
      // ...
    }
  }
  

2. 检查你的导航结构，是不是跳错了目标 #

很多时候我们会把App设置成一个导航容器（比如StackNavigator或者TabNavigator），里面嵌套了Home、Profile这些子页面。这种情况下，当你用navigate('App', {user: "hello"})跳转时，参数是传给App这个导航容器的，而不是它默认渲染的Home页面。这时候你在App页面拿到的params其实是导航容器自身的路由信息（就是你看到的{routeName:"Home"...）。

解决办法很直接：直接跳转到具体的子页面就行，比如：

// 登录页里改成直接跳Home
this.props.navigation.navigate('Home', {user: "hello"});

3. 如果必须通过App容器传参，试试全局状态管理 #

要是你的业务逻辑必须先进入App容器再传递用户信息，那更可靠的方式是用全局状态（比如React Context或者Redux）。登录成功后把用户信息存入全局状态，然后在App页面或者子页面直接从全局状态里取，这样就不用依赖导航传参了，还能避免页面跳转时的参数丢失问题。

比如用React Context的简易示例：

// 先创建一个UserContext
const UserContext = React.createContext();

// 登录页更新Context
class LoginScreen extends React.Component {
  handleLogin = () => {
    const user = "hello";
    this.props.navigation.navigate('App');
    // 更新Context里的用户信息
    this.context.setUser(user);
  };

  render() {
    return <button onClick={this.handleLogin}>登录</button>;
  }
}
LoginScreen.contextType = UserContext;

// App页面从Context取
class AppScreen extends React.Component {
  render() {
    const { user } = this.context;
    console.log(user); // 这里就能拿到用户信息了
    // ...
  }
}
AppScreen.contextType = UserContext;

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