web-dev-qa-db-fra.com

Undefined n'est pas une fonction proche de _reactNavigation.StackNavigator

Je souhaite configurer un React Native application avec side menu et un tab menu en même temps.

Je suivais this tutoriel.

Mon code .

Je reçois l'erreur:

undefined n'est pas une fonction (près de '... (0, _reactNavigation.TabNavigator) ...')

Que vous pouvez voir ici:

enter image description here

Aperçu de certains fichiers:

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

Vos importations depuis React Navigation ne sont pas correctes pour la version que vous utilisez (3.0.9). Ces exportations nommées ont été renommées après la v1, ce que le didacticiel que vous utilisez utilise.

Vous importez:

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

Lorsque vous devez les importer en tant que tels:

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

Vous devez également envelopper votre navigateur racine, dans ce cas votre navigateur de tiroir, dans createAppContainer.

Ainsi:

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

Si vous souhaitez une solution rapide, accédez simplement à votre package.json et remplacez la version de React Navigation from "react-navigation": "^3.0.9" à "react-navigation": "^1.5.2" et le Snack fonctionnera comme prévu https://snack.expo.io/@chris-bytelion/react-s

5
Chris Poe