该导航器缺少导航属性3

Question

此导航器缺少导航属性。在react-navigation 3中，您必须更直接地设置导航。我看了有关此文档，但是我仍然很难弄清楚如何将其实现到我的代码中。我做错了什么，该如何解决。请提供一些帮助。

这是我的 RootStack.js

import React from 'react';
import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
import SignInScreen from './App/screens/SignInScreen';
import Account from './App/screens/Account';
import Inventory from './App/screens/Inventory';
import Settings from './App/screens/Settings';
import SignUp from './App/screens/SignUp';
import ForgotScreen from './App/screens/ForgotScreen';
import Tournament from './App/screens/Tournament';
import TournamentRsvp from './App/screens/TournamentRsvp';
import Shop from './App/screens/Shop';
import Game from './App/screens/Game';

const routes = {
  SignInScreen: {
    screen: SignInScreen
  },
  Account: {
    screen: Account
  },
  Tournament: {
    screen: Tournament
  },
  TournamentRsvp: {
    screen: TournamentRsvp
  },
  Shop: {
    screen: Shop
  },
  Game: {
    screen: Game
  },
  SignUp: {
    screen: SignUp
  },
  ForgotScreen: {
    screen: ForgotScreen
  },
  Settings: {
    screen: Settings
  },
  Inventory: {
    screen: Inventory
  }
};

class AuthLoadingScreen extends React.Component {
  constructor() {
    super();
  }
}

const AppStack = createStackNavigator(routes, {
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false
  },
  initialRouteName: 'SignInScreen'
});
const AuthStack = createStackNavigator(
  {
    SignInScreen: {
      screen: SignInScreen
    }
  },
  {
    headerMode: 'none',
    navigationOptions: {
      headerVisible: false
    }
  }
);

export default createSwitchNavigator(
  {
    AuthLoading: AppStack,
    App: AppStack,
    Auth: AuthStack
    // AuthLoading: AppStack,
    // Auth: AuthStack
  },
  {
    initialRouteName: 'AuthLoading'
  }
);

这是我下面的 App.js

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import * as firebase from 'firebase';
import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
import { firebaseConfig } from './config.js';
import RootStack from './RootStack';

firebase.initializeApp(firebaseConfig);

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <RootStack />
      </View>
    );
  }
}

Answer 1

尝试包装createAppContainer。

import { createAppContainer, createStackNavigator } from 'react-navigation';

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AppStack,
    App: AppStack,
    Auth: AuthStack
    // AuthLoading: AppStack,
    // Auth: AuthStack
  },
  {
    initialRouteName: 'AuthLoading'
  }
));