web-dev-qa-db-ja.com

Undefinedは_reactNavigation.StackNavigatorの近くの関数ではありません

セットアップしたいReact Nativeアプリとside menuとtab menu 同時に。

私は this チュートリアルに従っていました。

マイコード 。

エラーが発生します：

undefinedは関数ではありません（ '...（0、_reactNavigation.TabNavigator）...'の近く）

あなたはここで見ることができます：

enter image description here

一部のファイルのプレビュー：

App.js

import React from 'react';
import { Drawer } from './src/navigators';

export default class App extends React.Component {
  render() {
    return (
      <Drawer />
    );
  }
}

navigators.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

// Navigators
import { DrawerNavigator, StackNavigator, TabNavigator } from 'react-navigation'

// StackNavigator screens
import ItemList from './ItemList'
import Item from './Item'

// TabNavigator screens
import TabA from './TabA'
import TabB from './TabB'
import TabC from './TabC'

// Plain old component
import Plain from './Plain'

export const Stack = StackNavigator({
  ItemList: { screen: ItemList },
  Item: { screen: Item },
}, {
  initialRouteName: 'ItemList',
})

export const Tabs = TabNavigator({
  TabA: { screen: TabA },
  TabB: { screen: TabB },
  TabC: { screen: Stack },
}, {
  order: ['TabA', 'TabB', 'TabC']
})

export const Drawer = DrawerNavigator({
  Stack: { screen: Stack },
  Tabs: { screen: Tabs },
  Plain: { screen: Plain },
})
react-nativereact-navigationjsxexpo
3
davidesp

Reactナビゲーションからのインポートは、使用しているバージョン（3.0.9）では正しくありません。これらの名前付きエクスポートは、フォローしているチュートリアルで使用しているv1の後に名前が変更されました。

インポートしています：

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

それらをインポートする必要がある場合：

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

また、ルートナビゲーター（この場合はDrawerナビゲーター）をcreateAppContainerでラップする必要があります。

そのようです：

export const Drawer = createAppContainer(
  createDrawerNavigator({
    Stack: { screen: Stack },
    Tabs: { screen: Tabs },
    Plain: { screen: Plain },
  })
);

簡単な修正が必要な場合は、package.jsonおよびReact Navigationfromのバージョンを置き換えます"react-navigation": "^3.0.9"to"react-navigation": "^1.5.2"とスナックは期待どおりに実行されます https://snack.expo.io/@chris-bytelion/react-s

5
Chris Poe