web-dev-qa-db-fra.com

L'usine native.createnavigator n'est pas une fonction

Je vais concevoir une navigation Drawer dans mon projet.

Je l'ai installé par cette commande:

npm install @react-navigation/drawer

Puis importé cela dans App.js

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

C'est mon package.json contenu:

"@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",

C'est mon App.js contenu:

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 j'ai déjà créé des composants Login et SecondPage et les ai 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 j'obtiens une erreur (écran suivant).

Comment puis-je réparer cela?

enter image description here

index.js 

export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';
reactjsreact-nativenavigation-drawerreact-navigation
14
roz333

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

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 la structure de votre navigateur devrait être la suivante.

Tiroirs.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}

OR

Ce problème peut être un problème de compatibilité avec la version. Les versions React-Navigation Et StackNavigator doivent être à jour.

0
hong developer

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

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

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

0
Gabriel Scalici