web-dev-qa-db-ja.com

未定義になることは、ドロワーナビゲーションの関数ではありません（ '（0、_reactNavigation.stacknavigator）'を評価する）

私のアプリケーションでは、引き出しナビゲーションが必要です。そのために、 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

enter image description here

誰でも助けてください

react-nativenavigation-drawerstack-navigator
13
rams

stackNavigatorの代わりに createStackNavigator を使用します。

9
Stundji

これがお役に立てば幸いです、私を助けてくれました！

App.js

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

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

export default createAppContainer(AppNavigator);

リンクを確認してください： React Navigation

6
Forhad

私は同じエラーメッセージを経験していたのでこれにつまずいた。 createStackNavigatorではなくStackNavigatorに加えて。問題は、3.xにアップグレードしたことで、3の新機能はcreateAppContainerです。

今、代わりに

export default DrawerNavigatorExample;

あなたが持っている必要があります

export default createAppContainer(DrawerNavigatorExample)

これが私がこれを研究するのに費やした時間に他の誰かを救うことを願っています：/

ドキュメントへのリンク

3
gwalshington

すべてのクラスに対して、コンポーネントの代わりにReact.Componentを使用する必要があります。私も同じ問題に直面し、このマイナーな修正で今働いています

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

package.jsonでreact-navigationを '^ 2.17.0'に編集し、次にPCを再起動します

0
Dzuhri Andika

この問題は、Android SDKプラットフォーム25をインストールしていない場合に発生する可能性があります。

  1. Android St​​udioを開きます
  2. SDKマネージャーを開く
  3. [SDKプラットフォーム]タブをクリックします
  4. Select Android 7.1.1（Nougat）APIレベルは25
  5. 適用する

インストールしたら、[OK]を押して、プロジェクトのビルドを再試行します。

0
MoHammaD ReZa DehGhani

次のコード例をご覧ください： https://snack.expo.io/@eriveltonelias/stack-actions

私は問題があると思う：

  1. stackNavigatorでは、createStackNavigator（ https://reactnavigation.org/docs/en/stack-navigator.html ）を使用する必要があります。
  2. drawNavigatorの代わりにcreateDrawerNavigatorを使用します（ https://reactnavigation.org/docs/en/drawer-navigator.html ）
0
Der_D

このコードを置き換えます：

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

プロジェクトのこのインポートで：

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

これがお役に立てば幸いです！

0
MoHammaD ReZa DehGhani