Компонент для маршрута AuthLogin должен быть компонентом React.

Привет, я разрабатываю приложение в React-Native и получил следующую ошибку:

Ошибка: Компонент для маршрута AuthLogin должен быть компонентом React.

Мой поток навигации выглядит следующим образом:

 const AppStack = createStackNavigator(
  {
    Home: HomeScreen,
    ImageDetails: ImageDetailsScreen,
  },
  {
    initialRouteName: 'Home',
    /* The header config from HomeScreen is now here */
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#000',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  });

const AuthTabStack =createTabNavigator(
  {
    AuthLogin : AuthStack,
    InstaLogin: InstagramLoginScreen,
    FacebookLogin: FacebookLoginScreen,
  }
);


const AuthStack = createStackNavigator(
  {
    Login: LoginScreen,
    Register: RegisterScreen,
  },
  {
    initialRouteName: 'Login',
    /* The header config from HomeScreen is now here */
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#000',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  });

const RootStack = createSwitchNavigator(
  {
    Splash: SplashScreen,//Checking user Authntication
    App: AppStack,
    Auth: AuthTabStack,
  },
  {
    initialRouteName: 'Splash',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

Навигация начинается с RootStack. Сначала содержит заставку. Проверка входа пользователя на этом экране и, соответственно, переход пользователя к AppStack или AuthTabStack.

Почему я получаю эту ошибку? Есть ли проблема с TabNavigator?

Спасибо.

ИЗМЕНИТЬ:

==> Это работает:

const AuthTabStack = createTabNavigator(
  {
    //AuthLogin: AuthStack,
    Login: LoginScreen,
    InstaLogin: InstagramLoginScreen,
    FacebookLogin: FacebookLoginScreen 
  }
);

Но StackNavigator внутри TabNavigator имеет проблему:

const AuthTabStack = createTabNavigator(
  {
    AuthLogin: AuthStack,
    //Login: LoginScreen,
    InstaLogin: InstagramLoginScreen,
    FacebookLogin: FacebookLoginScreen 
  }
);

===================================================


person Vishal Zaptech    schedule 26.07.2018    source источник
comment
Предоставьте файл AuthLogin   -  person Jay Thummar    schedule 26.07.2018
comment
Это ключ для AuthStack в TabNavigator. Здесь, :: AuthLogin: AuthStack,   -  person Vishal Zaptech    schedule 26.07.2018
comment
@JayThummar понял?   -  person Vishal Zaptech    schedule 26.07.2018
comment
@JayThummar Проблема возникает, когда я добавляю навигатор стека с именем AuthStack внутрь TabNavigator.   -  person Vishal Zaptech    schedule 26.07.2018
comment
@JayThummar А сейчас?   -  person Vishal Zaptech    schedule 26.07.2018


Ответы (1)


У вас есть пробел после AuthLogin, AuthLogin : AuthStack, вместо AuthLogin: AuthStack,. Это может быть причиной ошибки. Если это не помогло, попробуйте AuthLogin: { screen: AuthStack },

person NULL SWEΔT    schedule 26.07.2018
comment
Нет, сэр, проблема не в этом, потому что это работает. и это не работает... : const AuthTabStack = createTabNavigator({ AuthLogin: AuthStack, //Вход: LoginScreen, InstaLogin: InstagramLoginScreen, FacebookLogin: FacebookLoginScreen }); - person Vishal Zaptech; 27.07.2018