React Native跨屏幕传参异常：HomeScreen无法获取username参数

问题分析 #

你的导航层级是：WelcomeStack -> InputName 需要跳转至 CommonScreensStack -> HomeTab -> HomeScreen。原代码直接在navigation.navigate里指定screen: "Home"是错误的——Home并非CommonScreensStack的直接子页面，而是嵌套在HomeTab下的子页面，参数无法传递到正确层级，因此HomeScreen的route.params?.username返回undefined。

解决方案 #

方案一：修正嵌套导航的传参方式 #

调整InputName页面handleName方法中的导航代码，按照嵌套层级传递参数：

const handleName = async () => {
    if (!username.trim()) {
        alert('Please fill in a name')
    } else {
        // 按导航层级传参：先跳转到CommonScreensStack的HomeTab，再传递参数给HomeScreen
        navigation.navigate("CommonScreens", {
            screen: "HomeTab",
            params: {
                screen: "Home",
                params: {
                    username: username,
                },
            },
        });
        console.log(username)
        AsyncStorage.setItem("hasSeenWelcome", "true");
    }
}

HomeScreen页面无需修改原获取逻辑，此时route.params?.username即可正确拿到值：

const HomeScreen = ({ navigation, route }) => {
    let username = route.params?.username;
    console.log(username)
    // 后续渲染逻辑
}

方案二：通过AsyncStorage读取（兜底方案） #

既然已经在使用AsyncStorage存储状态，直接把username也存入，在HomeScreen中读取：

1. InputName页面存储username：

const handleName = async () => {
    if (!username.trim()) {
        alert('Please fill in a name')
    } else {
        navigation.navigate("CommonScreens", { screen: "HomeTab" });
        console.log(username)
        await AsyncStorage.setItem("hasSeenWelcome", "true");
        await AsyncStorage.setItem("username", username);
    }
}

2. HomeScreen页面读取：

import { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const HomeScreen = ({ navigation, route }) => {
    const [username, setUsername] = useState('');

    useEffect(() => {
        const fetchUsername = async () => {
            const storedName = await AsyncStorage.getItem("username");
            if (storedName) {
                setUsername(storedName);
                console.log(storedName);
            }
        };
        fetchUsername();
    }, []);

    // 后续渲染逻辑
}

注意事项 #

• 上述代码适配React Navigation v5/v6版本的嵌套传参语法。
• 使用AsyncStorage时必须处理异步操作，用async/await避免数据未读取完成就渲染。

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