时间戳

首页 > 解决方案 > 反应本机多个“根”视图？

react-native - 反应本机多个“根”视图？

问题描述

构建我的第一个 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导航器，但是这会在我的屏幕下方创建一个选项卡菜单，这是我不想要的。

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

感谢您的时间，保持安全！

标签： react-nativenavigation

解决方案

为什么你不想使用多个 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>
    );
};

推荐阅读