React-native switch для компонента маршрута должен быть компонентом React

Question

Я создаю приложение на реагирующем языке. Я пытаюсь установить начальное имя маршрута динамически в моей навигации с помощью switchNavigator. Вот мой код:

Navigation.js

import { createStackNavigator, createAppContainer, createSwitchNavigator } from 'react-navigation'
import homeDisconnect from '../screens/homeDisconnect.js'
import Login from '../screens/Login'
import Register from '../screens/Register'
import Home from '../screens/Home'
import AuthLoading from '../screens/AuthLoading'

const AppStack = createStackNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        headerTitle: 'Accueil',
        headerLeft: null,
        gesturesEnabled: false
      }
    }
  }
)

const AuthStack = createStackNavigator(
  {
    homeDisconnect: {
      screen: homeDisconnect,
      navigationOptions: {
        headerTitle: null,
        headerLeft: null,
        header: null
      }
    },
    Login: {
      screen: Login,
      navigationOptions: {
        headerTitle: 'S\'identifier',
        headerLeft: null
      }
    },
    Register: {
      screen: Register,
      navigationOptions: {
        headerTitle: 'S\'inscrire'
      }
    }
  },
  {
    headerLayoutPreset: 'center',
    initialRouteName: 'homeDisconnect'
  }
)

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoading,
    AppStack: AppStack,
    AuthStack: AuthStack,
  }
));

AuthLoading.js

import React, { Component } from 'react'
import {ActivityIndicator, StatusBar, StyleSheet, View} from 'react-native'

import {AppStack, AuthStack} from '../navigation/StackNavigation'

import { connect } from 'react-redux'

class AuthLoading extends Component {
  constructor() {
    super();
  }

    componentDidMount(){
      this._bootstrapAsync()
    }

  _bootstrapAsync = async () => {
    console.log(this.props)
    const userToken = this.props.token

    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };
  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  return state
}

export default connect(mapStateToProps)(AuthLoading);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

App.js

import {AuthLoading} from './src/screens/AuthLoading'

export default class App extends Component {
  render() {
    return (
      <View>
        <AuthLoading></AuthLoading>
      </View>
    )
  }
}

-> import {AppStack, AuthStack} из '../navigation/StackNavigation', это невозможно сделать таким образом? Я получаю эту ошибку:

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

Что я делаю не так?

Answer 1

SwitchNavigator знает, как перемещаться между экраном / стеком в одном и том же SwitchNavigator, поэтому я рекомендовал перемещаться следующим образом:

userToken ? 
this.props.navigation.navigate('AppStack') : this.props.navigation.navigate('AuthLoading')

, и вам не нужен этот импорт, поэтому удалите его:

import {AppStack, AuthStack} from '../navigation/StackNavigation'

Navigation.js:

 export default MainNavigator = createSwitchNavigator(
  {
    AuthLoading: AuthLoading,
    AppStack: AppStack,
    AuthStack: AuthStack,
  }
});

Теперь измените свой код в App.js:

import MainNavigator  from './src/screens/AuthLoading'

export default class App extends Component {
  render() {
    return (
      <View>
        <MainNavigator />
      </View>
    )
  }
}