La fabrique native.createnavigator n'est pas une fonction

10

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?

entrez la description de l'image ici

index.js

export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';
roz333
la source
1
J'ai eu le même problème, relancez - npm install @ react-navigation / native a résolu le problème
Liron Sher
Je l'apprécie vraiment, le problème a été résolu, savez-vous comment changer le style de tiroir? Je veux dire backgroundeColor et etc ...
roz333
merci @LironSher update @ react-navigation / native a travaillé pour moi
Hassan

Réponses:

0

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.

développeur hong
la source
J'ai essayé votre solution en ce moment, malheureusement elle n'a pas fonctionné
roz333
@ roz333 La même erreur se produit-elle?
développeur hong
oui exactement la même erreur
roz333
@ roz333 Pouvez-vous me montrer le fichier index.js?
développeur hong
Bien sûr, c'est le contenu index.js: `` `export * from './login'; export * de './header'; exporter * depuis './secondpage'; exporter * depuis './footer'; exporter * depuis './thirdpage'; ``
roz333
15

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

satya164
la source
0

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';

Gabriel Scalici
la source
-1

Contenu Index.js

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