未定义不是_reactNavigation.StackNavigator附近的函数 [英] Undefined is not a function near _reactNavigation.StackNavigator

问题描述

我想同时设置具有side menu和tab menu的React Native应用.

I want to setup a React Native app with a side menu and a tab menu at the same time.

我正在关注此教程.

我的代码.

我得到了错误:

未定义不是函数('...(0，_reactNavigation.TabNavigator)...'附近)

undefined is not a function (near '...(0 , _reactNavigation.TabNavigator)...')

您可以在这里看到

某些文件的预览:

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 Navigation导入的版本与您使用的版本(3.0.9)不正确.那些命名为export的文件在v1之后被重命名，这就是您正在使用的教程.

Your imports from React Navigation are not correct for the version you are using (3.0.9). Those named exports were renamed after v1 which is what the tutorial you are following is using.

您正在导入:

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

当您需要这样导入它们时:

When you need to import them as such:

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

您还需要将根导航器(在本例中为Drawer导航器)包装在createAppContainer中.

You also need to wrap your root navigator, in this case your Drawer navigator, in createAppContainer.

像这样:

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

如果您想快速修复，则只需进入package.json，然后将React Navigation的版本从 "react-navigation": "^3.0.9" 替换为 "react-navigation": "^1.5.2"和小吃将按预期运行 https://snack.expo.io/@chris-bytelion/react -s

If you would like a quick fix then just go into your package.json and replace the version of React Navigation from "react-navigation": "^3.0.9" to "react-navigation": "^1.5.2" and the Snack will run as expected https://snack.expo.io/@chris-bytelion/react-s

这篇关于未定义不是_reactNavigation.StackNavigator附近的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！