嵌套在堆栈导航器中的React Native选项卡导航器

我是React Native的新手，并且在屏幕上挣扎。我浏览了嵌套的导航文档（https://reactnavigation.org/docs/nesting-navigators/），该文档帮助我设置了我拥有的初始导航设置，但是我遇到了一些问题。

我正在尝试设置该应用，以便它的初始屏幕为“选择用户”，其中没有标签导航。选择用户后，您将被重定向到另一个具有选项卡导航的屏幕。我目前可以使用它，但是在初始屏幕之后我无法访问任何路线/道具/参数。

import { useNavigation } from "@react-navigation/native";即使必须在中提供参数，我也必须手动导入导航，即使Navigation.push试图{route}在屏幕上访问也指出路线未定义。

我的屏幕设置类似于以下内容：

const Tab = createBottomTabNavigator();
const WelcomeStack = createStackNavigator();
const HomeStack = createStackNavigator();
const SettingsStack = createStackNavigator();
const Stack = createStackNavigator();

const WelcomeStackScreen = () => (
    <WelcomeStack.Navigator>
        <WelcomeStack.Screen
            name="Welcome"
            component={WelcomeScreen}
            options={{ headerShown: false }}
        />
        <WelcomeStack.Screen
            name="SignUp"
            component={SignUpScreen}
            options={{ headerShown: false }}
        />
    </WelcomeStack.Navigator>
);

const HomeStackScreen = () => {
    return (
        <HomeStack.Navigator>
            <HomeStack.Screen name="Home" component={HomeScreen} />
            <HomeStack.Screen
                name="Search"
                component={SearchResultScreen}
                options={({ navigation }) => ({
                    headerLeft: () => (
                        <Ionicons
                            name={"arrow-back"}
                            size={30}
                            color={colours.text}
                            style={{ paddingLeft: 15 }}
                            onPress={() => {
                                navigation.goBack();
                            }}
                        />
                    ),
                })}
            />
            <HomeStack.Screen
                name="Select"
                component={SelectScreen}
                options={({ navigation, route }) => ({
                    title: route.params.name,
                    headerLeft: () => (
                        <Ionicons
                            name={"arrow-back"}
                            size={30}
                            color={colours.text}
                            style={{ paddingLeft: 15 }}
                            onPress={() => {
                                navigation.goBack();
                            }}
                        />
                    ),
                })}
            />
            <HomeStack.Screen name="Read" component={ReaderScreen} />
        </HomeStack.Navigator>
    );
};

function SettingsScreen() {
    return (
        <View
            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
        >
            <Text>TBD</Text>
        </View>
    );
}

const SettingsStackScreen = () => (
    <SettingsStack.Navigator>
        <SettingsStack.Screen name="Settings" component={SettingsScreen} />
    </SettingsStack.Navigator>
);

const TabNavigator = ({ route }) => (
    <Tab.Navigator
        screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
                let iconName;
                switch (route.name) {
                    case "Home":
                        iconName = focused ? "home" : "home-outline";
                        break;
                    case "Settings":
                        iconName = focused ? "list" : "list-outline";
                        break;
                    default:
                        break;
                }

                return <Ionicons name={iconName} size={size} color={color} />;
            },
        })}
        tabBarOptions={{
            activeTintColor: "tomato",
            inactiveTintColor: "gray",
        }}
    >
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen}/>
    </Tab.Navigator>
);

export default function App() {
    return (
        <NavigationContainer theme={navThemeOverride}>
            <Stack.Navigator>
                <Stack.Screen name="Welcome" component={WelcomeStackScreen} />
                <Stack.Screen
                    name="TabNavigator"
                    component={TabNavigator}
                    options={{ headerShown: false }}
                    navigationOptions={{ gesturesEnabled: false }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

以下是“欢迎”屏幕导航中的摘录

navigation.push("TabNavigator", {
    screen: "Home",
    params: {
      userId: userId,
  },
});