Question

您好，我正在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 
  }
);

但是， TabNavigator 中的 StackNavigator 存在问题：

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

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

Answer 1

您在AuthLogin，AuthLogin : AuthStack,之后有一个空格，而不是AuthLogin: AuthStack,。这可能导致错误。如果仍然无法解决，请尝试AuthLogin: { screen: AuthStack },

路线“ AuthLogin”的组件必须是一个React组件

1 个答案: