我创建的组件选项卡导航器未显示在主屏幕上

Question

我不知道为什么，但 tabnavigator 和 app drawer navigator 不起作用，我找不到问题所在

用于抽屉导航的 AppDrawerNavigator.js，我对这段代码中的 HomeScreen 有疑问

import * as React from 'react';
import { createDrawerNavigator } from 'react-navigation-drawer';
import CustomSideBarMenu from './CustomSideBarMenu';
import { TabNavigator } from './TabNavigator';
import SettingsScreen from '../screens/SettingsScreen';
import ContactScreen from '../screens/ContactScreen';
import HomeScreen from '../screens/HomeScreen';


export const AppDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: TabNavigator
  },
  ContactUs: {
    screen: ContactScreen
  },
  Settings: {
    screen: SettingsScreen
  },
},
  {
    contentComponent: CustomSideBarMenu
  },
  
  {
    initialRouteName: 'Home'
  },
)

AppStackNavigator.js 用于堆栈导航，我为堆栈导航创建了它，我对这个组件没有任何疑问

import * as React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../screens/HomeScreen';
import DonateScreen from '../screens/DonateScreen';
import ChatScreen from '../screens/ChatScreen';
import CleaningScreen from '../screens/CleaningScreen';

export const AppStackNavigator = createStackNavigator({
  Home: {screen: HomeScreen, navigationOptions: { headerShown: false }},
  DonateScreen: {screen: DonateScreen, navigationOptions: { headerShown: false }},
  ChatScreen: {screen: ChatScreen, navigationOptions: { headerShown: false }},
  CleaningScreen: {screen: CleaningScreen, navigationOptions: { headerShown: false }},


},
{
  initialRouteName: 'Home'
}
)

CustomSideBarMenu.js 用于我的自定义抽屉导航器

import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { DrawerItems } from 'react-navigation-drawer';
import firebase from 'firebase';
import { Icon } from 'react-icons';
import db from '../config';
 
export default class CustomSideBarMenu extends React.Component {
  render() {
    return(
      <View style = {{ flex: 1 }}>
        <DrawerItems {...this.props}/>
        <View style = {{ flex: 1, justifyContent: 'flex-end', paddingBottom: 30, }}>
          <TouchableOpacity style = {{ justifyContent: 'center', padding: 10, height: 30, width: '100%' }}
          onPress = {()=> {
            this.props.navigation.navigate('LoginScreen')
            firebase.auth.signOut()
          }}>
              <Icon
                name='fontawesome|poweroff'
                size={25}
                color='#042'
                style={{width: 10,  height: 10,}}/>
            <Text>Logout</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

用于标签导航的 TabNavigator.js

import * as React from 'react';
import { View, Image } from 'react-native';
import { Icon } from 'react-icons';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import HomeScreen from '../screens/HomeScreen';
import DonateScreen from '../screens/DonateScreen';
import ChatScreen from '../screens/ChatScreen';
import { AppStackNavigator } from '../components/AppStackNavigator';

export const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: AppStackNavigator,
      navigationOptions: {
        tabBarIcon: (
          <Icon
            name="fontawesome|home"
            size={25}
            color="#042"
            style={{ width: 10, height: 10 }}
          />
        ),
        tabBarLabel: 'Home',
      },
    },
    Chat: {
      screen: ChatScreen,
      navigationOptions: {
        tabBarIcon: (
          <Image
            source={require('../assets/chat.png')}
            style={{ width: 10, height: 10 }}
          />
        ),
        tabBarLabel: 'Chat',
      },
    },
    Donate: {
      screen: DonateScreen,
      navigationOptions: {
        tabBarIcon: (
          <Image
              source={require('../assets/donate.png')}
              style={{ width: 10, height: 10 }}
          />
        ),
        tabBarLabel: 'Donate',
      },
    },
  },

  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: () => {
        const routeName = navigation.state.routeName;
        if (routeName === 'Home') {
          return (
            <Icon
              name="fontawesome|home"
              size={25}
              color="#042"
              style={{ width: 10, height: 10 }}
            />
          );
        }
        if (routeName === 'Chat') {
          return (
            <Image
              source={require('../assets/chat.png')}
              style={{ width: 10, height: 10 }}
            />
          );
        }
        if (routeName === 'Donate') {
          return (
            <Image
              source={require('../assets/donate.png')}
              style={{ width: 10, height: 10 }}
            />
          );
        }
      },
    }),
  }
);

HomeScreen.js，如果你愿意，随时可以

import * as React from 'react';
import { View } from 'react-native';

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

App.js

import * as React from 'react';
import { View } from 'react-native';
import LoginScreen from './screens/LoginScreen';
import SignInScreen from './screens/SignInScreen';
import SignUpScreen from './screens/SignUpScreen';
import HomeScreen from './screens/HomeScreen';
import ForgotPasswordScreen from './screens/ForgotPasswordScreen';
import { AppDrawerNavigator } from './components/AppDrawerNavigator';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import { TabNavigator } from './components/TabNavigator';

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

const switchNavigator = createSwitchNavigator({
  LoginScreen: { screen: LoginScreen },
  SignInScreen: { screen: SignInScreen },
  SignUpScreen: { screen: SignUpScreen },
  HomeScreen: { screen: HomeScreen },
  ForgotPasswordScreen: { screen: ForgotPasswordScreen },
  AppDrawerNavigator: { screen: AppDrawerNavigator },
  TabNavigator: { screen: TabNavigator },
})

var AppContainer = createAppContainer(switchNavigator)

请尝试解决此错误