La fabrique native.createnavigator n'est pas une fonction

Je vais concevoir une navigation Drawer dans mon projet.

J'ai installé cela par cette commande:

npm install @react-navigation/drawer

Ensuite, j'ai importé ça dans App.js

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

Voici mon package.jsoncontenu:

"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/drawer": "^5.0.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.6",
"react-native-reanimated": "^1.7.0",
"react-native-screens": "^2.0.0-beta.1",
"react-native-view-shot": "^3.0.2",
"react-navigation": "^4.1.1",
"react-navigation-stack": "^2.1.0",

Voici mon App.jscontenu:

const App = () => {
  const Drawer = createDrawerNavigator();
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="login">
          <Drawer.Screen name="login" component={Login} />
          <Drawer.Screen name="second" component={SecondPage} />
        </Drawer.Navigator>
      </NavigationContainer>
    </View>
  )
};

Je dois dire que je l' ai déjà créé Loginet les SecondPagecomposants et les a déclarés dans un fichier nomméroot.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Login, Header, SecondPage, Footer, ThirdPage } from './components/index';

const AppNavigator = createStackNavigator({
  login: { screen: Login },
  header: { screen: Header },
  second: { screen: SecondPage },
  footer: { screen: Footer },
  third: { screen: ThirdPage }
}, {
  initialRouteName: 'login',
  headerMode: 'none',
  mode: 'modal',
}, {});

export default createAppContainer(AppNavigator);

Mais je reçois une erreur (écran suivant).

Comment puis-je réparer cela?

index.js

export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';

Je ne comprends pas ce que vous essayez de faire maintenant. Je pense que vous souhaitez ajouter un tiroir Navigateur.

Votre problème est que vous devez utiliser un conteneur, mais vous en avez deux, et createStackNavigator a deux paramètres, mais vous en avez trois.

createStackNavigator (RouteConfigs, StackNavigatorConfig);

Je pense que votre structure de navigateur devrait être la suivante.

Drawers.js

export default const Drawers = () => {
  const Drawer = createDrawerNavigator();
  return (
        <Drawer.Navigator initialRouteName="login">
          <Drawer.Screen name="login" component={Login} />
          <Drawer.Screen name="second" component={SecondPage} />
        </Drawer.Navigator>
  )
};

App.js

import Drawers from "./Drawers"
...

const AppNavigator = createStackNavigator({
  login: { screen: Drawers },
  header: { screen: Header },
  second: { screen: SecondPage },
  footer: { screen: Footer },
  third: { screen: ThirdPage }
}, {
  initialRouteName: 'login',
  headerMode: 'none',
  mode: 'modal',
});

export default createAppContainer(AppNavigator)

index.js

import Login from './login';
import Header from './header';
import SecondPage from './secondpage';
import Footer from './footer';
import ThirdPage from './thirdpage';

export { Login, Header, SecondPage, Footer, ThirdPage}

OU

Ce problème peut être un problème de compatibilité avec la version. React-Navigationet les StackNavigatorversions doivent être à jour.

Vous combinez React Navigation 4 et React Navigation 5 dans votre projet. Ce n'est pas valable.

Navigation 4 paquets React: react-navigation, react-navigation-stack, react-navigation-draweretc.

Navigation 5 React paquets: @react-navigation/native, @react-navigation/stack, @react-navigation/draweretc.

Suivez les documents officiels et utilisez la version et la syntaxe correctes des packages https://reactnavigation.org/docs/en/getting-started.html

En gros, supprimez votre code root.jset créez un navigateur de pile comme ici https://reactnavigation.org/docs/en/stack-navigator.html

essayez d'installer: yarn add react-navigation-stack

et dépendances: yarn add react-native-gesture-handler react-native-reeanimated react-native-screens react-native-safe-area-context @ react-native-community / masked-view

dans vos itinéraires: importez {createStackNavigator} depuis 'react-navigation-stack';

Contenu Index.js

export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';