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

问题描述

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

I was following this tutorial.

My code.

I get the error:

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

Which you can see here:

Preview of some of the files:

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 },
})

解决方案

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.

You are importing:

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

When you need to import them as such:

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

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

Like so:

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

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

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