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

Question

我是反应原生的新手，我遇到了这个问题:(路由'Principal'的组件必须是React组件。例如：...）。

我想把一个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>
    );
  }
}

Answer 1

只需在您正在使用它的Stack导航器上方声明并初始化DrawerNavigator。由于提升JS的基础，它正在发生。在javascript中，只有声明被提升，而不是初始化，所以当你使用Principal: {screen: AppDrawerNavigator}时，JS不知道AppDrawerNavigator实际上是一个React组件，因为它在使用之前没有被初始化。您可以在JS here中了解更多关于吊装的信息。

希望这可以帮助。快乐的编码！