Блог

Я новичок в react-native, и я столкнулся с этой проблемой: (Компонент для основного маршрута должен быть компонентом 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>
    );
  }
}
 

Просто объявите и инициализируйте свой DrawerNavigator над вашим навигатором стека, в котором вы его используете. Это просто происходит из-за подъема фундаментальной части JS. В javascript отображаются только объявления, а не инициализация, поэтому, когда вы используете Principal: {screen: AppDrawerNavigator} , JS не знает, что AppDrawerNavigator это на самом деле компонент React, поскольку он не инициализируется до его использования. Вы можете узнать больше о подъеме в JS здесь .