在抽屉式导航中获取未定义不是函数(评估'(0,_reactNavigation.stacknavigator)')

时间:2018-11-20 07:53:59

标签: react-native navigation-drawer stack-navigator

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

  

未定义不是函数(求值   '(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

enter image description here

任何人都可以帮助

13 个答案:

答案 0 :(得分:14)

我希望这对您有帮助,对我有帮助!

App.js

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

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

export default createAppContainer(AppNavigator);

查看链接:React Navigation

答案 1 :(得分:11)

使用createStackNavigator代替 stackNavigator

答案 2 :(得分:4)

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

现在,代替

export default DrawerNavigatorExample;

您需要拥有

export default createAppContainer(DrawerNavigatorExample)

希望这可以节省我研究此时间所花费的其他时间:/

link to docs

答案 3 :(得分:1)

请参阅反应导航步骤,这很容易。 访问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 />;
  }
}

答案 4 :(得分:1)

只需运行下面的代码

npm install @react-navigation/native 

然后它会摇滚

答案 5 :(得分:0)

替换此代码:

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

随着项目的导入:

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

希望对您有所帮助!

答案 6 :(得分:0)

此问题可能是由于尚未安装Android SDK平台25这样做:

  1. 打开Android Studio
  2. 打开SDK Manager
  3. 单击“ SDK平台”选项卡
  4. 选择android 7.1.1(Nougat)API级别为25
  5. 应用

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

答案 7 :(得分:0)

您可以在此处查看以下示例代码: 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)代替抽屉导航器

答案 8 :(得分:0)

在package.json中,将react-navigation导航到'^ 2.17.0',然后重新启动计算机

答案 9 :(得分:0)

所有类都必须使用React.Component而不是Component。我也同样遇到了同样的问题,并且现在通过此次要修复功能可以解决该问题

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

答案 10 :(得分:0)

# 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);

答案 11 :(得分:0)

尝试

npm i react-navigation@1.0.0-beta.23

答案 12 :(得分:0)

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

import createStackNavigator from 'react-navigation-stack';

必须

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