Question

请帮助，我不确定如何进行这项工作，我不知道如何从登录页面导航到包含选项卡的主屏幕，我只知道如何从登录页面导航到主屏幕，而没有底部标签。

我得到的错误是：路由“ 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);

Answer 1

身份验证成功后，您必须致电

this.props.navigation.navigate（“ Home”）;

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

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

Answer 2

在主屏幕中，如果要导入登录组件，如

import {Whatever} from 'Wherever'

将其更改为

import Whatever from 'Wherever'

尝试除去花括号。因为如我所见，您在导出中使用了默认。因此，当我们使用默认值时，在导入时不使用花括号。

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

2 个答案: