React本机交换机导航路由的组件必须是React组件

Question

我正在用react native构建一个应用程序。我正在尝试使用switchNavigator在导航中动态设置初始路由名称。这是我的密码：

航行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,
  }
));

授权加载。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',
  },
});

应用程序。js

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

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

--

路由AuthLoding的组件必须是React组件。

我做错了什么？

Answer 1

SwitchNavigator知道在同一个SwitchNavigator中在屏幕/堆栈之间导航，因此我建议以以下方式导航：

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

你不需要这个导入，所以删除它：

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

航行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>
    )
  }
}