React Native中如何向Tab导航内的指定页面传递登录数据？

咱们先搞清楚问题出在哪：你现在是把参数传给了MyTabs这个Tab导航容器，而不是直接传给HomeScreen。所以HomeScreen自己的route.params里根本没有Name这个值，自然会报Undefined的错误啦。

解决方案1：直接跳转Tab内的Home页面（最简单快速） #

你可以直接指定跳转到Tab导航里的Home页面，同时把参数带过去，这样参数就会直接落到HomeScreen的route.params中。只需要修改LoginScreen里的login函数：

const login = () => {
  navigation.navigate('MyTabs', { 
    screen: 'Home', 
    params: { Name: 'Boy' } 
  });
}

改完之后，你原来的HomeScreen代码不需要任何改动，就能正常获取到route.params.Name了。

解决方案2：在Tab容器中把参数传递给HomeScreen #

如果你想保持跳转到MyTabs的逻辑，那可以修改MyTabs组件，让它接收route参数，然后通过initialParams把参数传递给HomeScreen：

function MyTabs({ route }) {
  return (
    <Tab.Navigator>
      <Tab.Screen 
        name="Home" 
        component={HomeScreen} 
        initialParams={route.params} // 把Tab容器收到的参数传给Home页面
      />
      <Tab.Screen name="News" component={NewsScreen} />
    </Tab.Navigator>
  );
}

这样当你从登录页跳转到MyTabs时，传递的Name参数会通过initialParams传递给HomeScreen，页面就能正常获取值了。

解决方案3：全局状态管理（推荐用于多页面共享数据） #

如果你的应用后续有多个页面需要用到用户登录信息，那用全局状态管理会更省心，不用在页面之间反复传参数。这里用React Context举个简单例子：

1. 先创建一个用户上下文：

// UserContext.js
import React, { createContext, useState, useContext } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  return useContext(UserContext);
}

2. 在App.js中用这个上下文包裹导航容器：

import { UserProvider } from './UserContext';

function App() {
  return (
    <UserProvider>
      <NavigationContainer>
        <LoginStack.Navigator screenOptions={{headerShown: false}} initialRouteName="Login">
          <LoginStack.Screen name="Login" component={LoginScreen}/>
          <LoginStack.Screen name="MyTabs" component={MyTabs} />
        </LoginStack.Navigator>
      </NavigationContainer>
    </UserProvider>
  );
}

3. 在LoginScreen中设置用户数据：

import { useUser } from './UserContext';

export default function LoginScreen({navigation}) {
  const { setUser } = useUser();
  const Name = 'Boy';
  
  const login = () => {
    setUser({ Name: Name });
    navigation.navigate('MyTabs');
  }
  
  // 原有的页面渲染代码不变
}

4. 在HomeScreen中获取用户数据：

import { useUser } from './UserContext';

export default function HomeScreen({route, navigation}) {
  const { user } = useUser();
  
  return (
    <View style={styles.container}>
      <Text>{user?.Name}</Text> {/* 用可选链操作符避免未登录时的报错 */}
      <StatusBar style="auto" />
    </View>
  );
}

这种方式的好处是，后续不管哪个页面需要用户信息，直接调用useUser()就能拿到，非常方便。

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