web-dev-qa-db-fra.com

obtenir undefined n'est pas une fonction (évaluer '(0, _reactNavigation.stacknavigator)') dans la navigation dans les tiroirs

Dans mon application, j'ai besoin d'une navigation dans les tiroirs. Pour cela, j'utilise un exemple de code provenant de this . J'ai tout intégré dans mon application mais j'obtiens l'erreur suivante

indéfini n'est pas une fonction (évaluer '(0, _reactNavigation.stacknavigator)')

Et installé celui-ci aussi.

npm installe react-navigation --save

Mais je ne sais pas pourquoi cette erreur est à venir, alors s'il vous plaît guidez-moi comment résoudre ce problème.

C'est mon app.js

import React, { Component } from 'react';
import { StyleSheet , Platform , View , Text , Image , 
         TouchableOpacity , YellowBox } from 'react-native';
import { DrawerNavigator, StackNavigator } from 'react-navigation';

class NavigationDrawerStructure extends Component {
  //Structure for the navigatin Drawer
  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          {/*Donute Button Image */}
          <Image
            source={require('./image/drawer.png')}
            style={{ width: 25, height: 25, marginLeft: 5 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

class Screen1 extends Component {
  //Screen1 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 1 </Text>
      </View>
    );
  }
}

class Screen2 extends Component {
  //Screen2 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 2 </Text>
      </View>
    );
  }
}

class Screen3 extends Component {
  //Screen3 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 3 </Text>
      </View>
    );
  }
}

const FirstActivity_StackNavigator = StackNavigator({
  //All the screen from the Screen1 will be indexed here 
  First: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => ({
      title: 'Screen1',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen2_StackNavigator = StackNavigator({
  //All the screen from the Screen2 will be indexed here
  Second: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      title: 'Screen2',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen3_StackNavigator = StackNavigator({
  //All the screen from the Screen3 will be indexed here
  Third: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      title: 'Screen3',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const DrawerNavigatorExample = DrawerNavigator({
  //Drawer Optons and indexing
  Screen1: { //Title
    screen: FirstActivity_StackNavigator,
  },

  Screen2: {//Title
    screen: Screen2_StackNavigator,
  },

  Screen3: {//Title
    screen: Screen3_StackNavigator,
  },
});
export default DrawerNavigatorExample;

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    paddingTop: 20,
    alignItems: 'center',
    marginTop: 50,
    justifyContent: 'center',
  },
});

Et c'est package.json

{
  "name": "DrawerNavigation",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.5",
    "react-native-vector-icons": "^6.1.0",
    "react-navigation": "^3.0.0"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.49.2",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Si je suis échantillon ci-dessous obtenant également la même erreur.

https://medium.com/@mehulmistri/drawer-navigation-with-custom-side-menu-react-native-fbd5680060ba

 enter image description here

N'importe qui peut aider s'il vous plait 

react-nativenavigation-drawerstack-navigator
13
rams

Utilisez createStackNavigator au lieu de stackNavigator.

9
Stundji

J'espère que celui-ci vous aidera, il m'a aidé!

App.js

import { createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from './yourScreenPath';

const AppNavigator = createStackNavigator({
  Home: { screen: HomeScreen }
});

export default createAppContainer(AppNavigator);

Découvrez le lien: React Navigation

6
Forhad

Vous devez utiliser React.Component au lieu de Component pour toutes les classes. Moi aussi j'ai fait face au même problème et ça marche maintenant avec ce correctif mineur

class Screen2 extends React.Component {
  //Screen2 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 2 </Text>
      </View>
    );
  }
}
0
Sajan Mullappally

dans package.json, éditez react-navigation to '^ 2.17.0' SUIVANT redémarrez votre pc

0
Dzuhri Andika

Ce problème peut être dû à la plate-forme Android SDK pas installée 25 Faites ceci:

  1. Ouvrir Android Studio 
  2. Ouvrir le gestionnaire de SDK
  3. Cliquez sur l'onglet SDK Platforms
  4. Sélectionnez le niveau d'API Android 7.1.1 (Nougat): 25
  5. Appliquer

Après l’installation, appuyez sur OK et essayez à nouveau de construire le projet.

0
MoHammaD ReZa DehGhani

vous pouvez consulter cet exemple de code ici: https://snack.expo.io/@eriveltonelias/stack-actions

Je pense que le problème est:

  1. avec stackNavigator, vous devez utiliser createStackNavigator ( https://reactnavigation.org/docs/en/stack-navigator.html ) et. 
  2. au lieu de tiroir Navigator, utilisez createDrawerNavigator ( https://reactnavigation.org/docs/fr/drawer-navigator.html )
0
Der_D

Remplacez ce code:

import { createDrawerNavigator, createStackNavigator } from 'react-navigation';

Avec cette importation de votre projet:

import { DrawerNavigator, StackNavigator } from 'react-navigation';

j'espère que cela vous aidera!

0
MoHammaD ReZa DehGhani