如何从登录屏幕导航到包含底部选项卡的主屏幕

Posted 2023-03-15

【中文标题】如何从登录屏幕导航到包含底部选项卡的主屏幕

【英文标题】：How to navigate from login screen to home screen that contains the bottom tabs

【发布时间】：2019-07-16 06:33:58

【问题描述】：

请帮忙，我不知道如何使这项工作， 我不知道如何从登录页面导航到包含标签的主屏幕，我只知道如何从登录页面导航到主屏幕，但没有底部标签。

我得到的错误是：路由“App”的组件必须是 React 组件。

const HomeStack = createStackNavigator(
  
    //Defination of Navigaton from home screen
    Home:  screen: HomeScreen ,
    ViewBookings: 
      screen: ViewBookingsScreen,
      navigationOptions: 
        //Header customization of the perticular Screen
        headerStyle: 
          backgroundColor: '#0892d0',
        ,
        headerTintColor: '#FFFFFF',
        title: 'View All Bookings',
        //Header title
      , 
     ,

  ,
  
    defaultNavigationOptions: 
      //Header customization of the perticular Screen
      headerStyle: 
        backgroundColor: '#0892d0',
      ,
      headerTintColor: '#FFFFFF',
      title: 'Welcome, User',
      //Header title
    ,
  
);
const AuthStack =  createStackNavigator( SignIn: SignInScreen );
const App = createSwitchNavigator(
    
      AuthLoading: AuthLoadingScreen,
      App: TabStack,
      Auth: AuthStack,
    ,
    
      initialRouteName: 'AuthLoading',
    




);
const TabStack = createBottomTabNavigator(
  
    Home :  screen: HomeStack ,

    Bookings:  screen: BookingStack,
    Reminders:  screen: ReminderStack,
  ,

  
    defaultNavigationOptions: ( navigation ) => (
      tabBarIcon: ( focused, horizontal, tintColor ) => 
        const  routeName  = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Home') 
          iconName = `ios-home`;
         else if (routeName === 'Bookings') 
          iconName = `ios-book`;
         else if (routeName === 'Reminders') 
          iconName = `ios-alarm`;
        

        return <IconComponent name=iconName size=25 color=tintColor />;
      ,
    ),
    tabBarOptions: 
      activeTintColor: '#0892d0',
      inactiveTintColor: 'gray',
    ,
  
);

export default createAppContainer(App);

【参考方案1】：

身份验证成功后，您必须调用

this.props.navigation.navigate("Home");

这会将用户导航到主屏幕。

您可以根据自己的需要决定路线

【参考方案2】：

在您的主屏幕中如果您正在导入您的登录组件，例如

import Whatever from 'Wherever'

改成

import Whatever from 'Wherever'

尝试删除花括号。因为正如我所见，您已将 Default 用于导出。因此，当我们使用默认值时，我们在导入时不使用大括号。

【讨论】：

可怕的问题没有包含这些文件。你是怎么知道他的文件夹结构的？