React Native multiple "Root" Views?

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，然后用户继续移动，并可以选择向后移动。

然而，当他们完成这个过程(最后一个屏幕(时，我希望他们到达一个"屏幕"，它不是堆栈的顶部，而是它自己的"根"或"基础"视图。

我调查了什么

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

有可能做我想做的事吗？或者我现在需要重组我的设置吗？

感谢您抽出时间，保持安全！

Answer 1

为什么不想使用多个堆栈导航器？

我的方法是：

<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>
);
};