React Native 多个 "Root" 视图？

Question

构建我的第一个 React Native 应用程序。

目前我正在使用这种浏览不同视图的方式。

<NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name={"Start"} component={Welcome}/>
                <Stack.Screen name={"LoginMethod"} component={LoginMethod}/>
                <Stack.Screen name={"SocialSecurityNumber"} component={SocialSecurityNumber}/>
                <Stack.Screen name={"NorBankId"} component={NorBankId}/>
                <Stack.Screen name={"NorBankIdMobile"} component={NorBankIdMobile}/>
                <Stack.Screen name={"NorBankIdMobileUsername"} component={NorBankIdMobileUsername}/>
                <Stack.Screen name={"NorBankIdMobilePassword"} component={NorBankIdMobilePassword}/>
                <Stack.Screen name={"Fingerprint"} component={Fingerprint}/>
                <Stack.Screen name={"MainView"} component={MainView}/>
            </Stack.Navigator>
        </NavigationContainer>

此设置适用于新客户的入职流程。

所以第一个组件是 Welcome，然后用户继续移动，并可以选择向后移动。

但是，当他们完成该过程（最后一个屏幕）时，我希望他们到达一个 "Screen"，它不在堆栈的顶部，而是自己的 "Root" 或 "Base" 查看。

我调查了什么

我尝试过使用多个堆栈导航器，这是不行的。还检查了 Tab 导航器，但是这会在我的屏幕下方创建一个选项卡菜单，这是我不想要的。

是否可以做我想做的事，或者我是否需要重新调整我现在的设置方式？

感谢您的宝贵时间，注意安全！

Answer 1

为什么您不想使用多个 Stack-Navigator？

我的方法是：

<NavigationContainer>
    { inWelcomeProcess && <WelcomeNavigator/>}
    <AuthNavigator/>
</NavigationContainer>

const AuthStackNavigator = createStackNavigator();

export const AuthNavigator = () => {
    return (
        <AuthStackNavigator.Navigator screenOptions={defaultNavOptions}>
           <AuthStackNavigator.Screen name="Auth" component={AuthScreen} options={authScreenOptions}/>
           // Your other screens (after finishing the on-boarding) should go here
        </AuthStackNavigator.Navigator>
        );
    };

const WelcomeStackNavigator= createStackNavigator();

export const WelcomeNavigator= () => {
    return (
        <WelcomeStackNavigator.Navigator screenOptions={defaultNavOptions}>
            // Your On-Boarding process screens here
        </WelcomeStackNavigator.Navigator>
    );
};

React Native 多个 "Root" 视图？

React Native multiple "Root" Views?

navigation

react-native