Почему после входа в систему моя маршрутизация реакции-навигации не работает должным образом?

Question

У меня есть контейнер для навигации (создан в react-navigation)

const AppStack = createStackNavigator();

const AppStackScreen = () => (
        <AppStack.Navigator>
            <AppStack.Screen name="Tabbed" component={TabsScreenNavigationScreen} />
        </AppStack.Navigator>
    );

class AppNavigationContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            appLoading : true,
        }
    }

    user = {};

    componentDidMount() {
        let _this = this;

        this.getUser()
            .then(() => {
                this.setState({appLoading: !_this.state.appLoading})
            })
    }

    getUser = async () => {
        return await AsyncStoreService.getUserFromStore()
            .then((user) => {
                this.user = user;
            });
    }

    render() {
        const user = this.user;
        const {
            appLoading
        } = this.state;

        return (
            <NavigationContainer>
                {appLoading ?
                    <SplashScreen/>
                    :
                    <>
                        {user ?
                            <AppStackScreen/>
                            :
                            <AuthStackNavigationScreen/>
                        }
                    </>
                }
            </NavigationContainer>
        )
    }
}

export default AppNavigationContainer;

Как вы видите, я разделил модули для приложения и входа в систему. логин роутер:

const AuthStack = createStackNavigator();

const AuthStackNavigationScreen = () => (
    <AuthStack.Navigator>
        <AuthStack.Screen
            name="ChooseRole"
            component={SelectRoleScreen}
            options={{title: false}}
        />
        <AuthStack.Screen
            name="AuthStart"
            component={MainScreen}
            options={{title: false}}
        />
        <AuthStack.Screen
            name="SignIn"
            component={LoginScreen }
            options={{title: 'Sign In'}}
        />
        <AuthStack.Screen
            name="CreateAccount"
            component={RegisterScreen}
            options={{title: 'Create Account'}}
        />
    </AuthStack.Navigator>
);

export default AuthStackNavigationScreen;

Маршрутизатор с вкладками для приложения:

const GalleryStack  = createStackNavigator();
const SearchStack   = createStackNavigator();
const MessagesStack = createStackNavigator();
const MenuStack     = createStackNavigator();
const Tabs          = createBottomTabNavigator();

const GalleryStackScreen = () => (
    <GalleryStack.Navigator>
        <GalleryStack.Screen name="Gallery"     component={GalleryScreen} />
        <GalleryStack.Screen name="GalleryItem" component={GalleryItemScreen} />
    </GalleryStack.Navigator>
);

const SearchStackScreen = () => (
    <SearchStack.Navigator>
        <SearchStack.Screen name="Search"        component={SearchScreen} />
        <SearchStack.Screen name="SearchResults" component={SearchResultsScreen} />
    </SearchStack.Navigator>
);

const MessagesStackScreen = () => (
    <MessagesStack.Navigator>
        <MessagesStack.Screen name="ConversationList" component={ConversationListScreen} />
        <MessagesStack.Screen name="Conversation"     component={ConversationScreen} />
    </MessagesStack.Navigator>
);

const MenuStackScreen = () => (
    <MenuStack.Navigator>
        <MenuStack.Screen name="Menu"  component={MenuScreen} />
        <MenuStack.Screen name="About" component={AboutScreen} />
    </MenuStack.Navigator>
);

const TabsScreenNavigationScreen = () => (
    <Tabs.Navigator>
        <Tabs.Screen name="Gallery"  component={GalleryStackScreen} />
        <Tabs.Screen name="Search"   component={SearchStackScreen} />
        <Tabs.Screen name="Messages" component={MessagesStackScreen} />
        <Tabs.Screen name="Menu"     component={MenuStackScreen} />
    </Tabs.Navigator>
);

export default TabsScreenNavigationScreen;

Итак, на экране входа в систему name="SignIn" Вхожу в систему, выполняю navigation.navigate('Tabbed') после успешного входа в систему и получения сообщения:

The action 'NAVIGATE' with payload {"name":"Tabbed"} was not handled by any navigator.

Do you have a screen named 'Tabbed'?

Он не "видит" мою навигацию по вкладкам. Почему это происходит (у меня есть такой псевдоним, и я поставил его на рендеринг) и как это исправить?

Answer 1

В зависимости от того, какой у вас стек, в данный момент у вас будет либо стек приложений, либо стек авторизации.

<>
    {user ?
        <AppStackScreen/>
        :
        <AuthStackNavigationScreen/>
    }
</>

Таким образом, вы не можете перейти к вкладкам с экрана входа, которого не существует.

Способ, которым вы можете справиться с этим, - это обновить пользовательский объект, возможно, с помощью функции обратного вызова или использовать контекст вместо состояния, которое вызовет рендеринг AppNavigationContainer, и стек с вкладками будет автоматически отображаться вместо стека аутентификации. Вам не понадобится навигация, вы должны сделать то же самое для выхода из системы, где вы установите для пользователя значение null.

Вы можете сослаться на потоки аутентификации