获取未定义不是抽屉导航中的函数（评估'（0，_reactNavigation.stacknavigator）'）

Question

在我的应用程序中，我需要抽屉式导航，为此我使用来自this 的示例代码。我已将所有内容集成到我的应用程序中，但出现以下错误

undefined 不是函数（评估 '(0,_reactNavigation.stacknavigator)')

也安装了这个。

npm install react-navigation --save

但是不知道为什么会出现这个错误，所以请指导我如何解决这个问题。

这是我的 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',
  },
});

这是 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"
  }
}

如果我按照下面的示例也得到同样的错误。

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

请大家帮忙

Answer 1

我希望这个对你有帮助，它对我有帮助！

App.js

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

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

export default createAppContainer(AppNavigator);

查看链接：React Navigation

编辑：

较新版本没有createStackNavigator，现在可以在React Navigation Stack找到该功能。

Answer 2

使用createStackNavigator 代替stackNavigator。

Answer 3

我偶然发现了这一点，因为我遇到了同样的错误消息。除了createStackNavigator 而不是StackNavigator。问题是我升级到 3.x，而 3 中的新功能是 createAppContainer。

现在，而不是

export default DrawerNavigatorExample;

你需要

export default createAppContainer(DrawerNavigatorExample)

希望这可以节省我花在研究上的时间：/

link to docs

Answer 4

# Use of react-navigation (3.x) version ^3.0.0 #

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


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

export default createAppContainer(AppNavigator);

Answer 5

只需运行下面的代码

npm install @react-navigation/native 

之后它会摇滚

Answer 6

替换此代码：

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

通过这个项目的导入：

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

希望对你有帮助！

Answer 7

在 package.json 中编辑 react-navigation 到 '^2.17.0' NEXT 重启你的电脑

Answer 8

参考反应导航步骤然后很容易。 访问https://reactnavigation.org/docs/en/hello-react-navigation.html

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Profile... again"
          onPress={() => this.props.navigation.push('Profile')}
        />
      </View>
    );
  }
}
class ProfileScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile Screen</Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}
const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen
  },
  {
    initialRouteName: 'Home',
  }
);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

Answer 9

这个问题可能是因为没有安装 Android SDK 平台 25 这样做：

1. 打开 Android Studio
2. 打开 SDK 管理器
3. 单击 SDK 平台选项卡
4. 选择android 7.1.1 (Nougat) API 级别为25
5. 申请

安装后按 OK 并再次尝试构建项目。

Answer 10

您可以在此处查看此示例代码： https://snack.expo.io/@eriveltonelias/stack-actions

我认为问题是：

1. 使用 stackNavigator，您应该使用 createStackNavigator (https://reactnavigation.org/docs/en/stack-navigator.html) 和
2. 使用 createDrawerNavigator (https://reactnavigation.org/docs/en/drawer-navigator.html) 代替抽屉导航器

Answer 11

你必须为所有类使用 React.Component 而不是 Component。我也遇到了同样的问题，它现在正在使用这个小修复

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

Answer 12

试试

npm i react-navigation@1.0.0-beta.23

Answer 13

我遇到了同样的错误。问题在于我的导入语句

import createStackNavigator from 'react-navigation-stack';

必须

import { createStackNavigator } from 'react-navigation-stack';