React Navigation跳转BottomTabs时向User Profile传参失败求助

核心问题：路由名称不匹配 #

从你的控制台输出可以看到，目标页面的路由名称是**User Profile（包含空格）**，但你在Login.js的导航代码中写的是screen: 'UserProfile'（无空格），名称不匹配导致导航无法正确定位到目标页面，参数自然无法传递。

修复步骤 #

1. 统一路由名称 #

选择以下任意一种方式修正名称不一致的问题：

• 方式A：修改Login.js的导航代码
  将screen的值改为和实际路由名称一致的User Profile：

  // Login.js中handleLogin内的导航代码
  navigation.navigate('BottomTabs', {
    screen: 'User Profile', // 匹配控制台输出的页面名称
    params: { user: result.user },
  });
  

• 方式B：修改BottomTabs的路由配置
  将BottomTabs中User Profile页面的路由名称改为UserProfile，和Login.js中的调用保持一致。

2. 正确获取页面参数 #

在User Profile页面中，使用useRoute钩子正确获取传递的参数（避免直接访问params导致的undefined报错）：

import { View, Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const UserProfile = () => {
  const route = useRoute();
  // 使用可选链操作符处理参数未传递的情况
  const currentUser = route.params?.user;

  return (
    <View>
      {currentUser && (
        <>
          <Text>账号：{currentUser.username}</Text>
          <Text>密码：{currentUser.password}</Text>
        </>
      )}
    </View>
  );
};

export default UserProfile;

备选方案：直接导航到目标页面 #

如果User Profile页面在BottomTabs的导航栈中是全局可访问的，可以跳过直接导航BottomTabs，直接调用目标页面的路由名称：

// Login.js中handleLogin内的导航代码
navigation.navigate('User Profile', { user: result.user });

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