0

我有导航容器（创建于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'?

他没有“看到”我的标签导航。为什么会这样（我有这样的屏幕名称并将其渲染），我该如何解决这个问题？

4

1 回答 1

1

根据您拥有的堆栈，您将在给定时刻拥有 appstack 或 authstack

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

因此，您无法从不存在的登录屏幕导航到选项卡。

您可以处理此问题的方法是更新用户对象，可能使用回调函数或使用上下文而不是状态，这将触发 AppNavigationContainer 的呈现，并且选项卡式堆栈将自动呈现而不是身份验证堆栈。您不需要导航，您应该为注销到将用户设置为空的位置执行相同操作。

您可以参考更多关于Auth 流程

于 2020-06-21T17:04:32.853 回答