получение undefined не является функцией (оценка '(0,_reactNavigation.stacknavigator)') в навигации по ящику

В моем приложении мне нужна навигация по ящикам, для этого я использую пример кода из этого. Я интегрировал все в свое приложение, но получаю следующую ошибку

undefined не является функцией (оценка '(0,_reactNavigation.stacknavigator)')

И этот тоже установил.

npm install response-navigation --save

Но не знаю, почему появляется эта ошибка, поэтому, пожалуйста, подскажите, как ее решить.

Это мое приложение.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

введите описание изображения здесь

Кто-нибудь может помочь, пожалуйста


person rams    schedule 20.11.2018    source источник
comment
Как мы можем помочь, не проверяя ваш код? Поэтому, пожалуйста, будьте более подробны в вопросе.   -  person Samitha Nanayakkara    schedule 20.11.2018
comment
замените stacknavigator на StackNavigator или createStackNavigator, использование заглавных букв имеет значение!   -  person Steve    schedule 20.11.2018


Ответы (13)


Я надеюсь, что это поможет вам, это помогло мне!

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.

person Forhad    schedule 21.01.2019
comment
Вы должны объяснить шаги и свой код, а не публиковать только код в качестве ответа. - person Suraj Kumar; 21.01.2019
comment
Этой информации достаточно для того, кто столкнулся с этой проблемой! Вот почему я не объяснил! - person Forhad; 21.01.2019
comment
Я имею в виду, что вам нужно написать какое-то слово, которое я не хочу говорить, чтобы вы написали очень большое объяснение. Я думаю, что теперь это правильно. - person Suraj Kumar; 21.01.2019
comment
Согласно другому комментарию ниже, это, вероятно, связано с изменением React-navigation 2.x и 3.x. - person Ben Butzer; 01.02.2019

Используйте createStackNavigator вместо stackNavigator.

person Stundji    schedule 20.11.2018

Я наткнулся на это, потому что у меня было такое же сообщение об ошибке. Кроме createStackNavigator в отличие от StackNavigator. Проблема заключалась в том, что я обновился до 3.x, а новым в 3 является createAppContainer.

Теперь, вместо

export default DrawerNavigatorExample;

тебе нужно иметь

export default createAppContainer(DrawerNavigatorExample)

Надеюсь, это сэкономит кому-то еще час, который я потратил на изучение этого :/

ссылка на документы

person gwalshington    schedule 03.12.2018

Замените этот код:

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

С этим импортом вашего проекта:

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

Я надеюсь, что это поможет вам!

person MoHammaD ReZa DehGhani    schedule 20.11.2018
comment
здесь я использую StackNavigator, если я изменил выше, не могу найти переменную: StackNavigator - person rams; 20.11.2018
comment
проверьте свой код и посмотрите, где вы используете StackNavigator, и замените его на createStackNavigator, я не уверен, но должен помочь - person MoHammaD ReZa DehGhani; 20.11.2018
comment
хорошо, вы связали свою зависимость? вот так: реагирующая нативная ссылка и : реагирующая нативная ссылка - person MoHammaD ReZa DehGhani; 20.11.2018
comment
проверьте файл app.json выше - person rams; 20.11.2018
comment
не решено, попробовал этот образец medium.com /@mehulmistri/ но получаю ту же ошибку - person rams; 21.11.2018
comment
это может быть из-за вашего sdk25, я публикую ответ, проверьте его, я надеюсь, что ваша проблема будет решена - person MoHammaD ReZa DehGhani; 21.11.2018
comment
@rams пример, который вы использовали, устарел. У вас версия 3.0.0, но этот код предназначен для 1.*.*, возможно, взгляните на этот snack.expo.io/@react-navigation/auth-flow-v2 - person Der_D; 22.11.2018
comment
вы установили SDK 25? - person MoHammaD ReZa DehGhani; 25.11.2018

в package.json отредактируйте реагирующую навигацию на «^ 2.17.0». СЛЕДУЮЩИЙ перезагрузите компьютер.

person Dzuhri Andika    schedule 21.12.2018
comment
другие решения, понизить реагирующую навигацию до версии 2.17.0 - person Dzuhri Andika; 26.12.2018

Обратитесь к шагам реактивной навигации, тогда это легко. Посетите 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 />;
  }
}
person Avid Programmer    schedule 06.09.2019

Просто запустите ниже код

npm install @react-navigation/native 

после этого будет рок-н-ролл

person Ram Vilash    schedule 16.03.2021

Эта проблема может быть связана с неустановленной платформой Android SDK 25. Сделайте следующее:

  1. Откройте Android-студию
  2. Откройте диспетчер SDK
  3. Щелкните вкладку Платформы SDK.
  4. Выберите уровень API Android 7.1.1 (Nougat) 25.
  5. Подать заявление

После установки нажмите OK и попробуйте снова собрать проект.

person MoHammaD ReZa DehGhani    schedule 21.11.2018

вы можете посмотреть этот пример кода здесь: https://snack.expo.io/@eriveltonelias/stack-actions

Я думаю проблема в следующем:

  1. со stackNavigator вы должны использовать createStackNavigator (https://reactnavigation.org/docs/en/stack-navigator.html) и
  2. вместо drawerNavigator используйте createDrawerNavigator (https://reactnavigation.org/docs/en/drawer-navigator.html)
person Der_D    schedule 22.11.2018

Вы должны использовать React.Component вместо Component для всех классов. Я тоже столкнулся с той же проблемой, и теперь она работает с этим небольшим исправлением.

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

Попробуйте с

npm i [email protected]

person Sushil Dhayal    schedule 14.07.2019

У меня была такая же ошибка. Проблема была с моим оператором импорта

import createStackNavigator from 'react-navigation-stack';

должно быть

import { createStackNavigator } from 'react-navigation-stack';
person Tanzeel Ahmed    schedule 15.02.2021

person    schedule
comment
Пожалуйста, найдите время, чтобы улучшить свой ответ, добавив к нему некоторые пояснения, чтобы лучше понять, почему ваше решение может работать. - person DaFois; 04.06.2019