如何在React-Native中修复“路线'Principal'的组件必须是React组件”错误

我是新来的反应母语和我以前遇到过这样的问题：（路由组件“委托人”必须是一个阵营component.For例如：...） 。

我想将DrawerNavigator放在StackNavigator中。我已经知道这是个好方法，但是它给了我我一直在寻找的错误，但我无法解决。

谢谢

App.js

import React, { Component } from 'react';
import {createAppContainer,createStackNavigator,createDrawerNavigator} from 'react-navigation';
import Login from './pantallas/login';
import Registro from './pantallas/registro';
import PantallaPrincipal from './pantallas/pantallaPrincipal';
import SolicitudCitas from './pantallas/socitudCitas';
import {Header,Icon} from 'native-base';

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

const AppStackNavigator = createStackNavigator({
  Login: { screen: Login },
  Registro: { screen: Registro },
  Principal: {screen: AppDrawerNavigator}
},{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
}
);

const AppDrawerNavigator = createDrawerNavigator({
    PantallaPrincipal:{screen: PantallaPrincipal},
    SolicitudCitas: {screen: SolicitudCitas}}
    ,{
    defaultNavigationOptions: ({ navigation }) => {
        return {
          headerLeft: (
            <Header>
              <Icon
                style={{ paddingLeft: 10 }}
                onPress={() => navigation.openDrawer()}
                name="menu"
                size={30}/>
            </Header>
          )
        };
      }
    }
  );

const AppContainer = createAppContainer(AppStackNavigator);

pantallaPrincipal.js

import React, { Component } from 'react';
import { Text, View,StyleSheet } from 'react-native';

export default class pantallaPrincipal extends Component {
    
  render() {
    return (
      <View style={styles.backgroundContainer}>
        <Text>Pantalla principal</Text>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  backgroundContainer : {
    flex: 1,
    width: null,
    height: null,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

solicitudCitas.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class solicitudCitas extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Solicitud Citas</Text>
      </View>
    );
  }
}